web前端学习

1.浮动概述

在网页设计中，HTML元素依照默认规则，会从上到下或从左到右依次排列布局，这被称为正常的文档流。进行网页布局时，可以通过为元素设定浮动或定位属性，使元素脱离正常的文档流，出现网页设计者希望的位置，满足网页布局的需要。

1-1.设置浮动

利用float属性可以控制盒子向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，浮动的元素会脱离原文档流。

	
<div class="float_fater">
	<div class="float_class float_son1"></div>
	<div class="float_class float_son2"></div>
	<div class="float_class float_son3"></div>
</div>
<!-- 由于没有清除浮动，后续元素无法正常显示 -->
<div class="float_brother"></div>

	
.float_class{
	width: 50px;
	height: 50px;
	border: 1px solid #000000;
	float: left;
}

2.清除浮动概述

由于浮动元素脱离文档流，不占据原来的位置，因此会影响页面的结构显示。例如，子元素添加浮动属性后，父元素无法被撑开，高度变为0，如图3-9-2所示。想要避免由于浮动造成的页面结构混乱，需要清除浮动。

2-1.使用空div清除浮动

在父元素末尾布局一个空div标签，然后为这个标签设置CSS的clear属性来清除浮动对页面的影响。该方法的优点是简单、方便、兼容性好；缺点是需要额外添加一个元素，容易造成网页结构混乱，不利于网页后期维护。

	
<div class="float_fater">
	<div class="float_class float_son1"></div>
	<div class="float_class float_son2"></div>
	<div class="float_class float_son3"></div>	
</div>
<div id="float_clear1"></div>
<div class="float_brother"></div>

	
#float_clear1{
	clear: both;
}

2-2.使用伪元素:after清除浮动

为父元素添加一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的。

	
<div class="float_fater" id="float_fater2">
	<div class="float_class float_son1"></div>
	<div class="float_class float_son2"></div>
	<div class="float_class float_son3"></div>	
</div>
<div class="float_brother"></div>

	
#float_fater2::after{
	content: "";
	display: block;
	clear: both;
}

2-3.使用overflow属性

为父元素添加overflow属性并将值设为hidden或auto，可以清除浮动对父元素的影响。

	
<div class="float_fater" id="float_fater3">
	<div class="float_class float_son1"></div>
	<div class="float_class float_son2"></div>
	<div class="float_class float_son3"></div>	
</div>
<div class="float_brother"></div>

	
#float_fater3{
	overflow: hidden;
}