float归类于css定位属性(position),定义:float属性定义元素在那个方向的浮动,在css中,浮动元素会生成一个块级元素。而不论它本身何种元素。分两个方向述 说:
在float:left属性中前面的是块级,float:left紧随其后,这种情况分为两种:
当float:left是块级元素时,紧邻后面的元素分为两种情况:
1.紧邻的行内元素:此时float:left中的属性html标签相当于行内块级元素
<div>
<div class="div0">div0</div>
<div class="div1">div1</div>
<input type="text" class="input1" value="value1">
<div class="div2">div2</div>
</div>
<style>
.div0{
width: 200px;
height: 20px;
background-color: cornflowerblue;
}
.div1{
float: left;
width: 350px;
height: 20px;
background-color: red;
}
.div2{
width: 400px;
height: 20px;
background-color: black;
}
</style>
2.紧邻的块级元素,此时float:left脱落文档流。
<div>
<div class="div0">div0</div>
<div class="div1">div1</div>
<div class="div2">div2</div>
<input type="text" class="input1" value="value1">
</div>
当float:left是行内元素时,有两种情况分别为:
1.紧邻的是块级元素,此时float:left属性的标签相当于块级元素并且脱落文档流。
<style>
.div0{
width: 150px;
height: 20px;
background-color: darkgreen;
}
.div1{
width: 350px;
height: 20px;
background-color: red;
}
.div2{
width: 400px;
height: 20px;
background-color: black;
}
.input1{
float: left;
}
</style>
<div>
<div class="div0">div0</div>
<input type="text" class="input1" value="value1"/>
<div class="div1">div1</div>
<div class="div2">div2</div>
</div>
2.紧邻的行内元素:此时float:left属性标签相当于行内块级元素。
<div>
<div class="div0">div0</div>
<input type="text" class="input1" value="value1">
<input type="text" class="input12" value="value1">
<div class="div1">div1</div>
</div>
在float:left属性元素的前面的标签是行内元素,分为两种情况:
当float:left属性元素是块级元素,分两种情况:
1.float:left属性元素后面紧邻的是行内元素,此时float:left属性的元素相当于行内块级元素(inline-block),并且脱离文档流,并且先把float:left属性元素的前面的行内元素挤到float:left的右边。
<style>
.div1{
float:left;
width: 350px;
height: 50px;
background-color: red;
}
.div2{
width: 400px;
height: 50px;
background-color: #3c4543;
}
</style>
<div>
<input type="text" class="input1" value="value1"/>
<div class="div1">div1</div>
<input type="text" class="input2" value="value2">
<div class="div2">div2</div>
</div>
2.float:left紧邻的是块级元素,float:left脱离文档流。float:left属性前的内联元素被float:left挤到右边。
<style>
.div1{
float:left;
width: 350px;
height: 50px;
background-color: red;
}
.div2{
width: 400px;
height: 50px;
background-color: #3c4543;
}
</style>
<div>
<input type="text" class="input1" value="value1"/>
<div class="div1">div1</div>
<div class="div2">div2</div>
<input type="text" class="input2" value="value2">
</div>
当float:left是行内元素,分为另种情况:
1.紧邻的是行内元素,此时float:left属性的元素相当于行内块级元素(inline-block);紧邻元素在float:left前的行内的元素的左边。float:left前的行内元素在float:left的左边。
<style>
.div1{
width: 350px;
height: 50px;
background-color: red;
}
.div2{
width: 400px;
height: 50px;
background-color: black;
}
.input2{
float: left;
}
</style>
<div>
<input type="text" class="input1" value="value1" />
<input type="text" class="input2" value="value2" />
<input type="text" class="input3" value="value3">
<div class="div1">div1</div>
<div class="div2">div2</div>
</div>
2.紧邻的是块级元素,此时float:left属性的元素脱离文档流。float:left前的行内元素在float:left属性的元素的左边。
<style>
.div1{
width: 350px;
height: 50px;
background-color: red;
}
.div2{
width: 400px;
height: 50px;
background-color: black;
}
.input2{
float: left;
}
</style>
<div>
<input type="text" class="input1" value="value1" />
<input type="text" class="input2" value="value2" />
<div class="div1">div1</div>
<div class="div2">div2</div>
</div>
总结:float属性是一个块级元素,脱离文档流。当在该属性前是一个内联元素,会把内联元素挤到右边。
欢迎拍砖,总结不好。