CSS之清理浮动的原因及方式

出现浮动的原因：浮动元素碰到包含它的边框或者浮动元素的边框停留。

一.由于浮动元素不在文档流中，所以文档流的块框表现的就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。即框的文本内容会受到浮动元素的影响，会移动以留出空间，行框围绕浮动框。（实际上，可以创建浮动框使文本围绕图像）

清除方式：要阻止行框围绕在浮动框的外面，需要对包含这些行框的元素应用clear属性。clear属性值可以是left、right、both或none。

二.由于浮动元素脱离了文档流，所以包含浮动元素的父元素的高度无法被撑开，影响与父元素同级的元素。

清除方式：

举例：

<head>
...
<style>
.news  {
	width:100%;
	background-color:#3FF;
	border:solid 1px black;
	}
.news img  {
	float:left;
	}	
.news p  {
	float:right;
	}
</style>
</head>
<body>
<div class="news">
   <img src="teacher.png" alt="teacher" />
   <p>A paragraph</p>
</div>
</body>

效果图如下，容器不包围浮动元素

1.在最后一个浮动元素后面添加空的div标签，并添加样式clear:both。迫使容器包围浮动元素。

<head>
...
<style>
.news  {
        width:100%;
        background-color:#3FF;
	border:solid 1px black;
	}
.news img  {
	float:left;
	}
.news p  {
	float:right;
	}
.clear {
	clear:both;
	}
</style>
</head>
<body>
<div class="news">
   <img src="teacher.png" alt="teacher" />
   <p>A paragraph</p>
   <!--在最后一个段落下面添加一个空元素并且清理它。让包围元素在视觉上包围浮动元素-->
   <br class="clear" />
</div>
</body>

2.选择浮动父元素

<head>
...
<style>
.news  {
	width:100%;
	background-color:#3FF;
	border:solid 1px black;
	float:left;
	}
.news img  {
	float:left;
	}	
.news p  {
	float:right;
	}
</style>
</head>
<body>
<div class="news">
   <img src="teacher.png" alt="teacher" />
   <p>A paragraph</p>
</div>
</body>

//效果与上图相同

3.利用overflow属性的hidden或auto值的副作用，即会自动清理包含的任何浮动元素。

注：这个方法不适合所有情况，因为设置框的overflow属性会影响它的表现，这种方法在某些情况下会产生滚动条或者截断内容。

具体到本例的操作方法即：

.news  {
	background-color:#3FF;
	border:solid 1px black;
	overflow:hidden;
	}

//效果与上图相同

4.在使用CSS方法时，结合使用：after伪类和内容声明在指定的现有内容的末尾添加新的内容。比如此例中我添加一个点，因为它是个非常小的不引人注意的字符。不希望新内容占据垂直空间或在页面显示，将height设置为0，将visibility设置hidden。将display设置为block。设置之后，对生成的内容进行清理。

具体到本例的操作方法即：

.clear:after {
	content:".";
	height:0;
	visibility:hidden;
	display:block;
	clear:both;
	}

//效果与上图相同

5.也可以为父级元素div添加height。

CSS之清理浮动的原因及方式

猜你喜欢