清楚css浮动的三种方法

第一种：添加新元素，应用clear:both;     

<div class="clear"></div>
css样式：clear:both;

第二种：在浮动元素父级标签元素添加：overflow:auto;

<div class="over">
    <div class="left"></div>
    <div class="right"></div>
</div>

<style>
.over{overflow:auto;}
.left,.right{float:left;}
</style>

第三种：据说是最高大上的方法  :after 方法：（注意：作用于浮动元素的父亲）

<div class="over">
    <div class="left"></div>
    <div class="right"></div>
</div>

<style>
.over:after{clear:both;content:'';display:block;visibility:hidden;}
</style>

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

 

转载于:https://www.cnblogs.com/LLMjiayou7/p/7263620.html