css清除浮动float的三种方法

html-css027

css清除浮动float的三种方法,第1张

帮您查了下，如下:

第一种方法: 给父元素加display：inline-block，

第二种方法：给父元素加overflow：hidden，

第三种方法：在需要浮动的地方添加afterfix类名，并用after伪类。

一、浮动产生原因

简单地说，浮动是因为使用了float:left或float:right或两者都有而产生的浮动，导致样式缺失或者不正确显示等问题；

二、浮动产生负作用

1、背景不能显示

由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开

如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示

由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

  {clear:bothheight:0overflow:hidden}

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>