首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

[CSS]驱除浮动的三个方法

2013-10-08 
[CSS]清除浮动的三个方法一个没有设置高度的容器div内如果存在浮动元素(即使用了属性float:left或者float:

[CSS]清除浮动的三个方法

一个没有设置高度的容器div内如果存在浮动元素(即使用了属性float:left或者float:right),那么该父级元素会无法展开。

举个例子,有一个div容器,div容器里有两个小容器,分别向左和向右浮动,为了区别这三个容器,分别设置了不同颜色的边框。


注意到父级元素content没有展开。


为了使父级元素展开,有三种方法:


第一:设置父级元素的高度,但是要事先知道内容的高度,这里内部的元素高度是100像素,加上上下边框高度2像素,一共是102像素。



第二:添加样式,并在父级元素结束标签前添加both:clear样式。

<html><head><style>.content {width:500px;border:1px solid red;overflow:hidden;}.left {width:100px;height:100px;border:1px dashed blue;float:left;}.right {width:100px;height:100px;border:1px dashed green;float:right;}</style></head><body><div class="content"><div class="left"></div><div class="right"></div></div></body></html>


热点排行