css清除浮动是什么_清除浮动的三种方法

产生浮动会让div父级不能自然撑开,导致内容重叠,如何清除浮动,css如何实现清除浮动的?

清除浮动是什么?

使用float是让对象靠左或靠右浮动,而导致父级div撑不开,这个就是浮动产生了。

看看使用float产生了浮动。

CSS代码:

.box{ width:300px; border:1px solid #CCC}
.left{ float:left; width:200px;}
.right{ float:right; width:80px}
.boxs{ width:300px; border:1px solid #F00; color:#F00}

HTML代码:

<div class="box">
<div class="left">靠左的内容<br />内容</div>
<div class="right">靠右的内容<br />内容</div>
</div>
<div class="boxs">下面的内容</div>

看到结果;

产生浮动内容重叠
产生浮动内容重叠

本来我们布局红色应该在灰色DIV下面排版的,结果由于灰色内的子级div使用float参数了浮动,导致灰色盒子没有撑开,红色DIV就与灰色DIV重合了。

解决浮动也叫清除浮动方法有三种:

1、父级设置高度

如上面的对.box设置高度即可,一般需要找到子级高度保持一致高度。比如固定高度可以使用此方法。

CSS代码:

.box{ width:300px; border:1px solid #CCC;height:60px;}
.left{ float:left; width:200px;height:60px;}
.right{ float:right; width:80px;height:60px;}
.boxs{ width:300px; border:1px solid #F00; color:#F00}

HTML代码:

<div class="box">
<div class="left">靠左的内容<br />内容</div>
<div class="right">靠右的内容<br />内容</div>
</div>
<div class="boxs">下面的内容</div>

效果:

css设置高度清除浮动
css设置高度清除浮动

上面设置了高度60px与子级保持一致。

设置高度解决了浮动问题,缺点就是,子级高度

2、对父级设置overflow

对.box设置overflow:hidden即可清除浮动。

CSS代码:

.box{ width:300px; border:1px solid #CCC;overflow:hidden}
.left{ float:left; width:200px}
.right{ float:right; width:80px}
.boxs{ width:300px; border:1px solid #F00; color:#F00}

HTML代码:

<div class="box">
<div class="left">靠左的内容<br />内容</div>
<div class="right">靠右的内容<br />内容</div>
</div>
<div class="boxs">下面的内容</div>

效果:

清除浮动设置overflow样式
清除浮动设置overflow样式

父级设置了overflow:hidden解决浮动问题。

3、对父级div结束前设置clear样式的div

需要另外设置一个 clear:both css样式。

CSS代码:

.box{ width:300px; border:1px solid #CCC}
.left{ float:left; width:200px;}
.right{ float:right; width:80px}
.boxs{ width:300px; border:1px solid #F00; color:#F00}
.clear{ clear:both; height:1px}

HTML代码:

<div class="box">
<div class="left">靠左的内容<br />内容</div>
<div class="right">靠右的内容<br />内容</div>
<div class="clear"></div>
</div>
<div class="boxs">下面的内容</div>

效果

css clear清除浮动
css clear清除浮动

设置了clear样式清除了float产生的浮动。

上一篇:div居中-CSS设置DIV内容居中与DIV布局居中
下一篇:没有了
标签库