关于CSS清除浮动的几种方法

html-css022

关于CSS清除浮动的几种方法,第1张

清除浮动的方法主要一下几种：

(1).clear清除浮动（添加空div法）

在浮动元素下方添加空div,并给该元素写css样式 {clear:bothheight:0overflow:hidden}

(2).方法：给浮动元素父级设置高度

(3).方法：父级设置成inline-block

缺点：父级的margin左右auto失效，无法使用margin: 0 auto居中了

(4).给父级添加overflow:hidden 清浮动方法；

问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；

overflow: hidden

*zoom: 1

(5).万能清除法 after伪类 清浮动（现在主流方法，推荐使用）

.clear:after{content:''display:blockclear:bothheight:0overflow:hiddenvisibility:hidden}

.clear{zoom:1}

1.清除浮动的div默认是不会有高度的，除非你设置了高度。在编辑窗口中，是软件给你展示有一个div的存在而显示的，代码中依然没有改变本质。

2.如果想以类似<div class="clear:both"></div>这种形式清除浮动的话，那你最好将此div放置在有浮动属性的同级元素后面（比如对于你的代码就是li。不过ul的下一级元素只能是li，所以你可以写成这样：<li style="clear:bothheight:0visibility:hidden"></li>）；如果用overflow:auto这种方式，那么这个设置应该放在具有浮动属性元素的父容器中（如你的ul），而且这种方式是可以清除在非ie及ie7+浏览器中的浮动，对ie6无效，那么设置中应该多写上zoom:1等；还有就是伪对象的使用（:after）。有关清除浮动的方式、还有浮动的本质 网上有很多详释，希望你能认真的看下。多理解，那么你才会真正理解其内在，才好驾驭。

1，父级div定义 height

<style type="text/css">

.div1{background:#000080border:1px solid red/*解决代码*/height:200px}

.div2{background:#800080border:1px solid redheight:100pxmargin-top:10px}

.left{float:leftwidth:20%height:200pxbackground:#DDD}

.rightright{float:rightrightwidth:30%height:80pxbackground:#DDD}

</style>

<div class="div1">

<div class="left">Left</div>

<div class="right">Right</div>

</div>

<div class="div2">

div2

</div>

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单，代码少，容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

建议：不推荐使用，只建议高度固定的布局时使用

评分：★★☆☆☆

2，结尾处加空div标签 clear:both

<style type="text/css">

.div1{background:#000080border:1px solid red}

.div2{background:#800080border:1px solid redheight:100pxmargin-top:10px}

.left{float:leftwidth:20%height:200pxbackground:#DDD}

.rightright{float:rightrightwidth:30%height:80pxbackground:#DDD}

/*清除浮动代码*/

.clearfloat{clear:both}

</style>

<div class="div1">

<div class="left">Left</div>

<div class="right">Right</div>

<div class="clearfloat"></div>

</div>

<div class="div2">

div2

</div>

3，父级div定义 伪类:after 和 zoom

<style type="text/css">

.div1{background:#000080border:1px solid red}

.div2{background:#800080border:1px solid redheight:100pxmargin-top:10px}

.left{float:leftwidth:20%height:200pxbackground:#DDD}

.rightright{float:rightrightwidth:30%height:80pxbackground:#DDD}

/*清除浮动代码*/

.clearfloat:after{display:blockclear:bothcontent:""visibility:hiddenheight:0}

.clearfloat{zoom:1}

</style>

<div class="div1 clearfloat">

<div class="left">Left</div>

<div class="right">Right</div>

</div>

<div class="div2">

div2

</div>

4，父级div定义 overflow:hidden

<style type="text/css">

.div1{background:#000080border:1px solid red/*解决代码*/width:98%overflow:hidden}

.div2{background:#800080border:1px solid redheight:100pxmargin-top:10pxwidth:98%}

.left{float:leftwidth:20%height:200pxbackground:#DDD}

.rightright{float:rightrightwidth:30%height:80pxbackground:#DDD}

</style>

<div class="div1">

<div class="left">Left</div>

<div class="right">Right</div>

</div>

<div class="div2">

div2

</div>