清除浮动四种实现

一，添加新元素、运用样式clear:both

.clear{clear:both; height: 0; line-height: 0; font-size: 0}
<div class="outer">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div class="clear"></div>
</div>

二，父级div定义 overflow: auto或者overflow: hidden

.of{overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题}
<div class="outer of">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div class="clear"></div>
</div>

注意：overflow属性共有三个属性值：hidden,auto,visible。hiddent和auto可以清除浮动，visible不行。

三，最实用的方法  :after 方法（原理跟方法一类似，在父类后面添加伪标签after清除浮动）

.outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/
.outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}   /*==for FF/chrome/opera/IE8==*/
<div class="outer">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

其中clear:both;指清除所有浮动；content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。
visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。

四，浮动外部元素

转载于:https://www.cnblogs.com/xt911129/articles/6154843.html