CSS —— 清除浮动的方法及其原理理解

最新推荐文章于 2022-07-25 22:31:29 发布

ZhaoYLi

最新推荐文章于 2022-07-25 22:31:29 发布

阅读量1.1k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/miss_zxm/article/details/79377825

版权

CSS 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

一、为什么要清除浮动

浮动会引起父容器塌陷，导致页面布局出错等问题。

例子：

<body>
		<div class="parent_Div">	
			<div class="float_Div">float left float left float left float left.....</div>
			<div class="child_two_Div">child_two_Div child_two_Div child_two_Div......</div>			
		</div>
		<div class="bottom_Div">bottom_Div bottom_Div bottom_Div bottom_Div.......</div>
	</body>

样式：

	.parent_Div {
			width: 500px;
			border: 3px solid black;			
		}
		
		.float_Div {
			width: 100px;
			height: 100px;
			border: 2px dotted #C7254E;
			color: red;
			margin: 4px;
			float: left;
		}
		
		.bottom_Div {
			width: 500px;
			height: 100px;
			margin: 5px 0;
			border: 2px dotted black;
		}
		
		.child_two_Div {
			color: aqua;
			border: 2px solid aqua;
		}

Chrome 渲染结果：

这很显然不是我们想要的效果，因为它可能存在如下问题：

1、文本是围绕着浮动元素（.float_Div）排版的，然而，我们想要的结果是（.child_two_Div）元素的文字排列在浮动元素的下方，并不希望（.child_two_Div）两边有浮动元素存在。

2、浮动元素（.float_Div）排版超出了其父元素，父元素高度出现塌缩。

3、浮动元素（.float_Div）甚至影响到了其父元素（.parent_Div）的兄弟元素（.bottom_Div）的排版。这是因为浮动元素脱离了文档流，.bottom_Div在计算元素位置时会忽略其影响，紧接着上一个元素的位置继续排列。

了解了存在的问题，下面就介绍清除浮动的方法：

二、清除浮动的方法

1、使用clear样式

给需要清除浮动的元素添加样式：

	.child_two_Div {
			color: aqua;
			border: 2px solid aqua;
			clear: left; /*添加清浮动的样式*/
		}

渲染效果（clear的值为both也有相同的效果）：

通过上面的样式，保证了（.child_two_Div）元素的左边没有浮动元素，同时，父元素的高度也被撑起来了，其兄弟元素的渲染也不再受到浮动的影响。

但是，如果我们把HTML中的（.child_two_Div）元素和（.float_Div）元素交换一下位置呢？

   <body>
		<div class="parent_Div">
			<div class="child_two_Div">
				child_two_Div child_two_Div child_two_Div...
			</div>	
			<div class="float_Div">
				float left float left float left float left...
			</div>					
		</div>
		<div class="bottom_Div">
			bottom_Div bottom_Div bottom_Div bottom_Div...
		</div>
	</body>

渲染结果：

给 .child_two_Div 元素使用清除浮动样式：

	.child_two_Div {
			color: aqua;
			border: 2px solid aqua;
			clear: left; /*添加清浮动的样式*/
		}

结果：

从渲染效果可以看出，调换位置之后，无论.child_two_Div元素是否应用清除浮动样式，渲染结果都是上面这个样子。

这是因为，.child_two_Div元素的位置确定了，于是浮动元素就紧接着.child_two_Div元素下方渲染在父元素的左侧。然而，父元素的高度没有被撑起来，没有将浮动影响‘内化’，导致浮动影响了接下来元素的排版。

所以，看来，为达到撑起父元素高度的目的，使用clear清除浮动的方法还是有一定的适用范围，因此，我们需要更加可靠、通用的办法。

2、在父元素结束标签之前插入清除浮动的块级元素

HTML结构如下：

<body>
		<div class="parent_Div">
			<div class="child_two_Div">
				child_two_Div child_two_Div child_two_Div...
			</div>	
			<div class="float_Div">
				float left float left float left float left...
			</div>	
                  <div class="more"></div>			
		</div>
		<div class="bottom_Div">
			bottom_Div bottom_Div bottom_Div bottom_Div...
		</div>
	</body>

给新增元素添加样式：

	.more{
			clear: both;
		}

渲染结果：

此方法，和使用clear清除浮动，撑起父元素高度原理一样。

3、利用伪元素

HTML结构如下，给.parent_Div元素添加一个类名clearfix

	<body>
		<div class="parent_Div clearfix">
			<div class="child_two_Div">
				child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div
			</div>
			<div class="float_Div">
				float left float left float left float left
			</div>
		</div>
		<div class="bottom_Div">
			bottom_Div bottom_Div bottom_Div bottom_Div child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div
		</div>
	</body>

样式表如下：

.clearfix:after{
			content:'.';
			height: 0;
			clear: both;
			display: block;
		}

该样式在父元素的最后添加一个:after伪元素，通过清除伪元素浮动来撑起父元素的高度。

该元素的display值为block，表示它是一个不可见的块级元素（有的地方使用tabel，因为tabel也是块元素）

渲染结果：

4、使用overflow清除浮动

HTML结构如下：

	<body>
		<div class="parent_Div">
			<div class="child_two_Div">
				child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div
			</div>
			<div class="float_Div">
				float left float left float left float left
			</div>
		</div>
		<div class="bottom_Div">
			bottom_Div bottom_Div bottom_Div bottom_Div child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div
		</div>
	</body>

样式表：

	.parent_Div {
			width: 500px;
			border: 3px solid black;
			/*使用overflow清除浮动*/
			overflow: auto;
		}overflow: auto;
		}

渲染结果：

仅仅在父元素上添加一个值为auto的overflow属性，就能达到撑起父元素高度的效果，将浮动元素包裹在内。其实这里的overflow值，还可以是除visible之外的任何值，都能达到撑起父元素高度，清除浮动的效果。不过，有的值会有副作用，比如，scroll值会导致滚动条始终可见，hidden值会导致超出边框的值不可见等。

ZhaoYLi

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS —— 清除浮动的方法及其原理理解

一、为什么要清除浮动浮动会引起父容器塌陷，导致页面布局出错等问题。例子：<body> <div class="parent_Div"> <div class="float_Div">float left float left float left float left.....</div> <div class=...
复制链接

扫一扫