深入理解CSS清除浮动与clear属性

深入理解CSS清除浮动与clear属性

相信作为一名前端工作人员，一定遇到过或是被问过清除浮动这一问题，一般我们会说：元素添加float属性后，其父元素不会被撑开，解决这个问题的过程就称为清除浮动。没有问题，假如再深入问一点，为什么添加float属性之后会出现这样的情况，有几种清除浮动的方法。
浮动的案例：父元素没有被撑开

<div class="container">
	<div class="photo"></div>
	<div class="name"></div>
	<p>震落了清晨满披着的露珠，
	伐木声丁丁地飘出幽谷。
	放下饱食过稻香的镰刀，
	用背篓来装竹篱间肥硕的瓜果。
	秋天栖息在农家里。
	向江面的冷雾撒下圆圆的网，
	收起青鳊鱼似的乌桕叶的影子。
	芦篷上满载着白霜，
	轻轻摇着归泊的小桨。
	秋天游戏在渔船上。
	草野在蟋蟀声中更寥阔了。
	溪水因枯涸见石更清冽了。
	牛背上的笛声何处去了，
	那满流着夏夜的香与热的笛孔？
	秋天梦寐在牧羊女的眼里。</p>
</div>

.container {
	border: 1px solid #686464;
}
.container .photo {
	float: left;
	width: 100px;
	height: 160px;
	background-color: #F6900B; 
}
.container .name {
	float: left;
	width: 100px;
	height: 40px;
	background-color: #F03309;
}

一、**float属性：**元素在添加了float属性之后，会被自动变成块级元素，并脱离文档流，可以理解为和普通的块级元素不在同一层，所以不会撑开父元素。边框靠拢到父元素的边框或是其他浮动元素的边框。
注：position:absolute也会让元素脱离文档流，不会撑开父元素，不同的是float元素到底呈现在什么位置是由浏览器决定的，而绝对定位元素的位置是需要人为设定的。

解决上述父元素没有被撑开的问题就称为清除浮动，最经常用到的办法就是给元素添加CSS属性clear:both。

二、clear究竟是如何工作的？个人认为最合理的解释就是官网：

规定元素的哪一侧不允许其他浮动元素，特别声明只对前面的元素起作用。
两个浮动元素的案例：

1.photo元素是浮动的，name元素不是，且都是container元素的子元素。为name元素添加clear:left属性的效果

.container .name {
	float: left;
	clear: left;
	width: 100px;
	height: 40px;
	background-color: #F03309;
}

可以看到，name元素不允许左侧出现浮动元素，那么name元素就会自动移动到下一行去。

2.按照对clear属性的理解，不允许哪一侧出现浮动元素，我们给photo元素添加一个clear:both属性，试一试看看有什么样的效果。

.container .photo {
	float: left;
	clear: both;
	width: 100px;
	height: 160px;
	background-color: #F6900B; 
}

发现并没有起任何作用，name元素依然出现在了photo的右侧。这是因为就像之前声明的：clear只对前面的元素起作用。

三、那么如何能够实现下面这种布局呢？（让float元素撑开父元素）

1.也很简单，只需要给父元素添加一个overflow:hidden即可，同时，给name元素添加clear:left属性

.container {
	border: 1px solid #686464;
	overflow: hidden;
}
.container .name {
	float: left;
	clear: left;
	width: 100px;
	height: 40px;
	background-color: #F03309;
}

2.如果不给父元素添加overflow:hidden属性，可以采用伪元素的方式来实现同样的效果：

.container::after {
	content: " ";
	display: block;
	clear: both;
}

总结：

1.float会让元素变成块级并脱离文档流，所以不会撑开父元素，会浮动到父元素的边框或者其他浮动元素边框；

2.clear属性的含义在于不允许该元素的某侧出现浮动元素，并且只对前面的元素起作用；

3.给父元素添加overflow:hidden或是利用伪元素可以实现让浮动元素撑开父元素的效果。