浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。
如果想要实现三个块级元素并排显示，期望效果如下图所示：
给三个块级元素都加上float属性后，页面效果如下图所示：
问题出现了，父元素高度塌陷了
一目了然：如果我们给上面的三个绿颜色的方块设置display:inline-block也能达到让它们并排显示的效果。并且父元素的高度也不会塌陷。只不过无法控制是居左还是居右，display:inline-block只能从左往右。
我们说的清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。
清除浮动的两大基本方法：
1. 在父元素的最后加一个冗余元素并为其设置clear:both
当添加了最后一个冗余元素（未设置clear:both）时；父元素和此冗余元素的高度都为0，并且三个浮动的元素都浮在了它们的上方盖住了它们（可以把它们看成PS中的图层）。现在，给这个冗余元素添加clear:both（clear属性介绍），它便要躲开这三个浮动元素，因此，一直往下跑，直到没有被浮动元素盖住才停下来。而父元素看到这个子元素跑开了，自然想要包裹住它。
此方法的缺点是，必要在页面中添加很多没有意义的冗余元素，太麻烦，而且不符合语义化。
2.采用伪元素，这里我们使用:after。添加一个类clearfix： （推荐）
在我们需要清除浮动时，只需要给父元素追加clear类即可，既方便又符合语义化。
该方法的缺点是，IE6/IE7不识别:after伪元素，存在兼容性问题
BFC块级格式化上下文有以下特征：
不单单只有给父元素添加overflow:hidden才可以创建块级格式化上下文，下列方法都可以：
采用float属性之后产生的现象：
1、妙脆角-嘎嘣脆 - 容错性比较糟糕，容易出现问题
2、吝啬鬼-重用废 - 这种布局需要元素固定尺寸，很难重复使用
3、洋葱头-IE7飙泪 - 在低版本的IE下有很多问题
line-height实现居中，这种方法适合纯文字类相对定位，子级设置绝对定位，标签通过margin实现自适应居中transform实现浮动布局简介:当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变现的好像浮动元素不存在一样。
这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block还是有一些区别的，第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题
最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素的高度塌陷。
元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据CSS中white-space属性的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。
问题描述: 实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度的50%。同时div中有一个文字A，文字需要水平垂直居中。
答案是相对于父元素的width值。
延伸：如果子元素不是绝对定位，那宽高设为百分比是相对于父元素的宽高，标准盒模型下是content, IE盒模型是content+padding+border。
而且要做到左右宽度固定，中间宽度自适应。
这种float布局是最难理解的，主要是浮动后的负margin操作，这里重点强调一下。
右边的盒子设置margin-left: -250px后，盒子在该行所占空间为0，因此直接到上面的middle块中,效果:
现在就达到最后的效果了:
看看grid布局，其实也挺简单的吧，里面的参数应该不言而喻了。
另外说一点，到2019年为止，grid现在绝大多数浏览器已经可以兼容了，可以着手使用了。
当然，还有table布局，年代比较久远了，而且对SEO不友好，知道就可以，这里就不浪费篇幅了。
有了圣杯布局的铺垫，双飞翼布局也就问题不大啦。这里采用经典的float布局来完成。
（1）BFC垂直方向边距重叠
（2）BFC的区域不会与浮动元素的box重叠
（3）BFC是一个独立的容器，外面的元素不会影响里面的元素
（4）计算BFC高度的时候浮动元素也会参与计算
1. 防止浮动导致父元素高度塌陷
接下来将inner元素设为浮动:
会产生这样的塌陷效果：
但如果我们对父元素设置BFC后, 这样的问题就解决了:
同时这也是清除浮动的一种方式。
两个块同一个BFC会造成外边距折叠，但如果对这两个块分别设置BFC，那么边距重叠的问题就不存在了。
此时三个元素的上下间隔都是10px, 因为三个元素同属于一个BFC。 现在我们做如下操作:
可以明显地看到间隔变大了，而且是原来的两倍，符合我们的预期。
关于CSS布局问题，先分享到这里，后续会不断地补充，希望对你有所启发。如果对你有帮助的话，别忘了帮忙点个赞哦。
首先float是组织网页浮动（对象靠左left、靠右right）样式属性单词。在构造中咱们要让对象靠左显现只要求对对象设置float:left款式即可。
设置装备摆设div结构靠左。
float:left是配置对象靠左（浮动靠左）排版。不论div、p、span、h1、li等标签均可设置而且完善兼容。平时css div机关中常见左中右、左右等更冗杂排版均紧要float:left格局来机关。
在现实div+css布局中常见左右机关，左中右结构组织时会用到float left格式，一般靠左 和靠中的div咱们均会设置装备摆设float:left抵达并排靠左表示。
如需转载，请注明文章出处和来源网址：
