【HTML/CSS】浮动模型和清除浮动的方法

1 浮动

浮动是让元素脱离文档流，浮动前后的非定位元素会无视浮动元素，可能沿着元素另一侧垂直流动。

浮动元素会生成一个块级框，具有块级元素的特性，但是不占整行。

浮动元素脱离了文档流，无法为文档流中的父元素撑起高度，造成父盒子塌陷的问题。

2 清除浮动

clear:left左侧不允许浮动元素

clear:right右侧不允许浮动元素

clear:both两侧不允许浮动元素

3 清除浮动的技巧

添加一个空的div + clear:both清除浮动，添加了无意义的html代码

给父元素添加overflow:hidden，父元素本身形成一个BFC，BFC可以包裹浮动流，BFC中浮动元素的高度也被计算在内，可以实现清除浮动，但是无法显示溢出的元素。

给父元素设置伪元素清除.clearfix::after {content: '';display: block;clear: both;height: 0;visibility: hidden; } .clearfix{*zoom: 1 /*兼容IE 会触发haslayout*/ /*haslayout是IE浏览器引擎的一个组成部分，在IE中，一个元素要么根据自身内容进行布局，要么根据父元素进行布局。haslayout=“true”，元素会根据自身的内容去调整大小，而非依赖父元素去渲染自己。haslayout = “false”，该元素会依赖于父元素渲染自己。*/ }

总结

以上是生活随笔为你收集整理的【HTML/CSS】浮动模型和清除浮动的方法的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。