css样式_浮动与清除浮动

浮动与清除浮动

浮动

解决排列的问题；尤其是图文混排（文字环绕）

什么是浮动，来，看图：

.box{
				width: 150px;
				height: 100px;
				background-color: darkgrey;
				float: right;//右浮动
			}

float: ; 浮动属性，属性值：none（默认不浮动）、left（左浮动）、right（右浮动）。浮动效果：使元素脱离文档流。

浮动元素对包含块内其他元素的影响：

<div class="big_box">
			<div>前面的盒子</div>
			<div class="box">小盒子</div>
			<div>后面的盒子</div>
		</div>

对包含块内块级元素的影响：

浮动后的元素不会影响同一包含块内在其之前的块级元素；但脱离文档流后，其后面的块级元素会直接占据浮动元素原来的位置；这里，若设置“小盒子”为左浮动，则“后面的盒子”会被遮盖。

对包含块内行级元素和行内块元素的影响：

由此可见，可以利用这种效果进行文字环绕图片如下：

<div class="fd">
			<img src="2.png"/>
			<!--<div style=" width: 150px; height: 100px;background-color: green;"></div>-->
			<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati voluptatum sed at nam provident laborum 
				odit tenetur illo aliquam porro repellendus quas dicta quisquam ab vel sequi officiis. Ipsa itaque!</span></p>
		</div>

！注意若想设置图片与文本的水平距离，直接设置图片的右侧的外边距即可。

浮动还阔以轻松让盒子们在网页中进行排列：

即：让“图片1”左浮动，“图片2右浮动”；“图片3”不浮动但会被遮盖，可以对图片三进行定位或者左浮动之后用margin-top调整。注意：这三个图片一定是放在一个大盒子里面的。

清除浮动

浮动很好玩，但也有弱点；当一个元素内部的子元素都浮动了，这个元素会存在高度塌陷的问题。解决方法如下：

方法一：创建空元素（缺点：多余）

在元素内部创建一个空元素直接进行清除浮动：

.clearfix{
clear:both;
}

clear的属性值有：none（默认值）、left（清除左浮动）、right（清除右浮动）、inherit（从父元素继承clear值）。
注意：这个空元素必须出现在所有子元素的下方。

方法二：overflow：auto（或hidden）；

缺点：影响包含块内其他元素溢出部分的效果！

方法三：伪元素选择器（建议选择这个）

在高度塌陷的元素后面添加：

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