1. Features of floating positioning:
- Out of document flow, does not occupy position, not controlled by default arrangement (left to right, top to bottom)
- No matter how it floats, it is still in the box
- The element will be docked to the left or right of the parent element, or to the left or right of an already floated element
- After block-level elements are floated, the width adaptation is no longer 100%
- After the inline element is floated, it will become a block-level element
2. Floating property
- float: none: default, no floating positioning is set
- float: left: float left
- float: right: float right
3. Simple example
<body>
<div class="mydiv">
<div class="d1">第一个</div></div>
<div class="d2">第二个</div>
<div class="d3">第三个</div>
<div class="d4">第四个</div>
<div class="d5">第五个</div>
</div>
</body>
There is no effect before setting:
after floating the four boxes respectively:
.d1,.d2,.d3,.d4,.d5{
width: 100px;
height: 100px;
float: left;
}
.d1{
background-color:blue;
}
.d2{
background-color:pink;
}
.d3{
background-color:green;
}
.d4{
background-color:purple;
}
.d5{
background-color:red;
}
</style>
<body>
<div id="mydiv">
<div class="d1">第一个</div></div>
<div class="d2">第二个</div>
<div class="d3">第三个</div>
<div class="d4">第四个</div>
<div class="d5">第五个</div>
</div>
</body>
Renderings:
4. The parent element collapses
Because floating positioning is out of the document flow and does not occupy the position, if a child element of an element is set to float, and the element does not have a height set, then the height of the element, that is, the parent element, will become 0, which is the height of the parent element collapse.
For example, in the mydiv box in the above example, we can clearly see the effect after adding a border:
then in this case, we need to clear the float.
5. Clear floating (to solve the collapse of the parent element)
- Set the height for the parent element (the height will be fixed, generally not recommended)
<style>
#d{
/*1.给父元素设置高度 height*/
height: 300px;
}
#d1{
width: 80px;
height: 80px;
float: left;
background-color: red;
}
#d2{
float:left;
width: 100px;
height:80px;
background-color: green;
}
#d3{
float:left;
width: 120px;
height:80px;
background-color: blue;
}
</style>
<body>
<div class="clearDiv" id="d">
<div id="d1">这是div1</div>
<div id="d2">这是div2</div>
<div id="d3">这是div3</div>
</div>
</body>
- Set an overflow for the parent element (the part that needs to overflow will also be hidden, not recommended)
<style>
#d{
/*3.给父元素设置一个overflow*/
overflow: hidden; /*溢出隐藏*/
}
#d1{
width: 80px;
height: 80px;
float: left;
background-color: red;
}
#d2{
float:left;
width: 100px;
height:80px;
background-color: green;
}
#d3{
float:left;
width: 120px;
height:80px;
background-color: blue;
}
</style>
<body>
<div class="clearDiv" id="d">
<div id="d1">这是div1</div>
<div id="d2">这是div2</div>
<div id="d3">这是div3</div>
</div>
</body>
- Add a smallest son to the parent element (add an empty block-level element) Set clear:both to this son (add meaningless semantics, which is not conducive to later maintenance, not recommended)
<style>
/*3.给父元素添加一个最小的儿子，给这个儿子添加clear：both;*/
.clear{
clear: both;
}
#d1{
width: 80px;
height: 80px;
float: left;
background-color: red;
}
#d2{
float:left;
width: 100px;
height:80px;
background-color: green;
}
#d3{
float:left;
width: 120px;
height:80px;
background-color: blue;
}
</style>
<body>
<div class="clearDiv" id="d">
<div id="d1">这是div1</div>
<div id="d2">这是div2</div>
<div id="d3">这是div3</div>
<div class="clear"></div>
</div>
</body>
- Use CSS's :after pseudo-element for the parent element (recommended)
<style>
/* 4.给父元素设置after 给after设置clear:both */
.clearDiv:after{
content:'' ;
display: block;
clear: both;
}
#d1{
width: 80px;
height: 80px;
float: left;
background-color: red;
}
#d2{
float:left;
width: 100px;
height:80px;
background-color: green;
}
#d3{
float:left;
width: 120px;
height:80px;
background-color: blue;
}
</style>
<body>
<div class="clearDiv" id="d">
<div id="d1">这是div1</div>
<div id="d2">这是div2</div>
<div id="d3">这是div3</div>
</div>
</body>