day08 float属性

float

1、定义

float属性定义元素在哪个方向浮动。任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
float的值为：
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

<!-- <div class="wrapper">
	<div class="content">1</div>
	<div class="content">2</div>
	<div class="content">3</div>
	<div class="content">4</div>
	<div class="content">5</div>
	<div class="content">6</div>
	<div class="content">7</div>
	<div class="content">8</div>
	<div class="content">9</div>
</div>

.wrapper{
		width:350px;
		height:330px;
		border:1px solid black;
}

.content{
		margin-right: 10px;
		margin-bottom:10px;
		float: right;
		width:100px;
		height:100px;
		background-color:black;
}

让元素站队：

2、浮动元素会产生浮动流

所有产生了浮动流的浮动元素，块级元素看不到它们。
但触发了bfc的元素、文本类属性（inline）元素、文本都能看到。

 <div class="box"></div>
<div class="demo"></div>123 

.box{
	float:left;
	width:100px;
	height:100px;
	background-color: red;
	opacity:0.5;

}
.demo{
	width:200px;
	height:200px;
	background-color: green;
}

如图红色块向左浮动产生浮动流，绿色块受影响看不见红色块。而文本“123”则看得见。

在.demo里加上适当的bfc即可清除浮动流的影响。

3、父级包住浮动流的办法

1、可修改伪元素(clear指令对块级有效)
2、在父级增加bfc

<div class="wrapper">
	<div class="content">1</div>
	<div class="content">2</div>
	<div class="content">3</div>
</div>

.wrapper{
		border:2px solid black;
}

.content{
		float:left;
		color:#fff;
		width:100px;
		height:100px;
		background-color:black;
}

如图，子级内容向左浮动，产生浮动流，导致块级元素的父级包裹不住。

（1）在父级的伪元素上添加clear指令，清除浮动流，实现包裹。

div::after{
	content: "";
	clear:both;
	display:block;
}

（2）在父级添加bfc.(ps: float:left \ position: absolute 会使元素从内部变为inline-block属性，因此会根据内容决定父框大小)

4、文字环绕图片

float这个属性最早应用于图像，使文本围绕在图像周围.

2018.9.24