CSS布局模型之浮动模型（浮动的工作原理和清除浮动技巧？）-创新互联
浮动的工作原理
浮动是让某元素脱离文档流，在浮动框之前和之后的非定位元素会当它不存在一样，可能沿着它的另一侧垂直流动，但都为其腾出空间，块级元素也不例外（被浮动元素占据了部分行空间的块级元素，仍然被看作是占据了一整行，只不过是被浮动元素占据的那部分空间无法利用罢了）。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止；如果当前线上的水平空间不足，它将逐行向下移动，直到有空间为止（所以浮动元素不会影响页面上方布局）。任何元素都可以浮动，浮动元素会生成一个块级框（拥有块级元素特性，但不占整行），而不论它本身是何种元素。
另外因为浮动元素脱离了文档流，所有它无法为其文档流中的父级元素撑起高度。
清除浮动技巧
1、clear清除浮动
left 在左侧不允许浮动元素。
right在右侧不允许浮动元素。
both在左右两侧均不允许浮动元素。
none默认值。允许浮动元素出现在两侧。
在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样。例如：如果声明为左边清除，会使元素的上外边框边界刚好在左边浮动元素的下外边距边界之下。
要注意了，我们是通过在别的元素上清除浮动来实现撑开高度的， 而不是在浮动元素上。浮动元素脱离了文档流，就算为其加了清除空间，也影响不了父元素的高度，最多能让其某侧不允许其他浮动元素。
clear 只能作用与块级元素或浮动元素，不过上面已经说了作用于浮动元素的弊端，所以一般都是使用块级元素。
全浏览器通用的clearfix方案，使用伪元素清除浮动【推荐】
// 引入了zoom以支持IE6/7
// 同时加入:before以解决现代浏览器上边距折叠的问题
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
.clearfix{
*zoom: 1;
}
另外：也可以在父级元素中增加一个专门清除浮动的块级元素。（不推荐）
2、BFC清除浮动
BFC全称是块状格式化上下文，它是按照块级盒子布局的。我们了解他的特征、触发方式、常见使用场景这些就够了。
BFC的主要特征
BFC容器是一个隔离的容器，和其他元素互不干扰；所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。
BFC可以包含浮动；通常用来解决浮动父元素高度坍塌的问题。
其中，BFC清除浮动就是用的“包含浮动”这条特性。
那么，怎样才能触发BFC呢？
BFC的触发方式
我们可以给父元素添加以下属性来触发BFC：
float 为 left | right
overflow 为 hidden | auto | scorll
display 为 table-cell | table-caption | inline-block | flex | inline-flex
position 为 absolute | fixed
参考文献：http://www.jianshu.com/p/09bd5873bed4
https://www.w3.org/TR/2008/REC-CSS2-20080411/visuren.html#propdef-float
PS:如果对你有帮助，就顺手点个赞吧~
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
网站标题：CSS布局模型之浮动模型（浮动的工作原理和清除浮动技巧？）-创新互联
分享地址：http://6mz.cn/article/ijsij.html