1.实现一个最大的正方形//第一种不能显示子元素div{width:100%;heigth:0;padding-bottom:100%}//第二种伪元素+padding-bottom+absolute。father{width:100%;position:relative}.father::after{content:'';display:block;padding-bottom:100%}.son{position:absolute;width:100%;height:100%}2.一行水平居中，多行左对齐。father{text-align:center}.son{display:inline-block;text-align:left}3.实现两列布局左侧固定，右边的自适应布局使用浮动。左侧元素的宽度固定，右侧元素的margin-left设置为floatleft设置为固定宽度，右侧会自动填满父元素或右侧元素的margin-left将更改为溢出：隐藏/自动；这样右边会触发BFC使用绝对定位，而父元素会被设置为相对定位。左侧元素是绝对定位的并且具有固定的宽度。右侧元素的margin-left值设置为左侧元素的宽度。或者右边元素绝对定位，left是左边元素的宽度值4，css3实现三列布局，左右固定，中间自适应使用flex布局display:flex;左右元素flex00200px；中间元素flex:1采用浮动实现，父元素固定宽高，左框向左浮动，右框向右浮动，宽高固定，中间框自适应。将中间自适应框的html标签放在最后，使用绝对定位来实现。为父框设置相对定位，为两边的框设置绝对定位，并根据父框进行偏移。左边框为left0，右边框为right0，中间框为margin0200px5，BFC理解为块级格式化上下文，独立的渲染区域，相当于一个容器，里面的元素容器不会影响外部元素的布局，外部元素也不会影响内部元素的布局激活方式。浮动元素floatleft/right定位元素positionabsolute/fixeddisplayflex/inline-block/table-celloverflowhidden/auto/scroll不可见功能解决margin重叠问题，默认相邻元素margin会重叠解决ofheightcollapse：子元素设置为float后，父元素的高度会塌陷，即父元素的高度变为0。把父元素变成BFC，设置overflowhidden，创建自适应两列布局，左边设置float:left，右边设置overflow:hidden。这样BFC在右边触发，BFC的区域不会和浮动元素重叠。left{width:100px;height:200px;background:red;float:left}.right{height:300px;background:#00f;overflow:hidden