css有两种属性用于去除浮动：1.clear属性，可定义元素不允许浮动，通常写为clear:both;说明元素两侧不允许浮动，可以去除浮动。overflow属性，父级元素定义overflow:hidden;样式还可以去除浮动。
前端（vue）入门精通课程:入学
本教程的操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
什么是CSS清除浮动？
在非IE浏览器（如Firefox）下，当容器的高度为auto，而且容器的内容有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这种现象被称为浮动溢出，以防止这种现象的发生CSS处理，就叫CSS清除浮动。
引用W3C的例子，news容器不包围浮动元素。
.news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } <div class="news"> <img src="news-pic.jpg" /> <p>some text</p> </div>
清除浮动方法
方法一:用带clear属性空元素
浮动元素后使用空元素，如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}浮动可以通过属性。亦可使用<br class="clear" />或<hr class="clear" />清理。
.news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } .clear { clear: both; } <div class="news"> <img src="news-pic.jpg" /> <p>some text</p> <div class="clear"></div> </div>优点：简单，代码少，浏览器兼容性好。
缺点：需要添加大量无语义的缺点html元素，代码不够优雅，后期不易维护。
方法二:使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;或overflow:auto;此外，可以清除浮动 IE6 还需要触发 hasLayout ，例如，父元素设置容器宽度或设置 zoom:1。
在添加overflow属性后，浮动元素回到容器层，支撑容器高度，达到清理浮动的效果。
.news { background-color: gray; border: solid 1px black; overflow: hidden; *zoom: 1; } .news img { float: left; } .news p { float: right; } <div class="news"> <img src="news-pic.jpg" /> <p>some text</p> </div>方法三：向浮动元素容器添加浮动元素
将浮动属性添加到浮动元素容器中，可以去除内部浮动，但会使其整体浮动，影响布局，不推荐使用。
方法四:用邻接元素处理
什么都不做，在浮动元素后面添加元素clear属性。
.news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } .content{ clear:both; } <div class="news"> <img src="news-pic.jpg" /> <p>some text</p> <div class="content"></div> </div>方法五:使用CSS的:after伪元素
结合 :after 伪元素(注意这不是伪类，而是伪元素，代表一个元素后的最新元素)和 IEhack ，能完美兼容当前主流浏览器，在这里 IEhack 指的是触发 hasLayout。
添加浮动元素容器clearfix的class，然后给这个class添加一个:after在元素的末尾添加一个看不见的块（Block element）清理浮动。
.news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } .clearfix:after{ content: "020"; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* 触发 hasLayout */ zoom: 1; } <div class="news clearfix"> <img src="news-pic.jpg" /> <p>some text</p> </div>通过CSS伪元素最终在容器的内部元素中添加了一个看不见的空间"020"或点"."，并且赋予clear去除浮动的属性。需要注意的是，这是为了IE6和IE7浏览器，给clearfix这个class添加一条zoom:1;触发haslayout。
总结
通过以上例子，不难发现，去除浮动的方法可分为两类：
一是利用 clear 属性包括在浮动元素的末尾添加一个 clear: both 属性的空 div 事实上，使用闭合元素 :after 伪元素的方法也是在元素的末尾添加一个内容作为一个点 clear: both 实现属性元素。
二是触发浮动元素父元素 BFC (Block Formatting Contexts, 块级格式化的上下文)父元素能够包含浮动元素。
(学习视频分享:css视频教程、web前端）
以上就是在css清除浮动的详细内容是什么属性？请多注意php中文网其他相关文章！
