Getting web front-end to combat: css floating characteristics, influence and bring and how to clear floating floating

The default block elements arranged vertically in the flow of the document, so that a plurality of turn arranged from top to bottom div

If desired block element arranged horizontally on the page, you may be used to make the floating elements float, whereby the document from the stream, the stream after the element from the document, it will immediately move the lower element upwards

css properties float

1. floating elements do not cover the text, the text is automatically wrapped around the floating element

2. After floating elements, we will try to the upper left of the page or is this the right upper float until it reaches the border or other floating the parent element

3. If the upper float element is not a floating block elements, the block elements floating element will not exceed

4. The floating element will never exceed the top of his siblings, while most crowded

The block element from the document flow after default height and width are lost. SUMMARY aspect is softened (the default of the parent element accounts for 100%) (which is the flow characteristics from the document, just before floating this is so)

6. inline elements from the document flow, will become the block elements (once all the elements from the document flow. Block elements will become full)

<style>
body{color:#FFFFFF;}

.box1{
width: 400px;height: 100px;

background-color:red;
float: left;    
}
.box2{
width: 400px;height: 100px;
background-color:Black;
float: left;    
}
.box3{
width: 100px;height: 100px;
background-color:Blue;
float: right;   
}
</style>

<div style="width:550px;border:5px solid #FF4500;overflow:hidden;">
    <div class="box1">box1左浮动</div>
    <div class="box2">box2左浮动</div>
    <div class="box3">box3右浮动(为什么不到右上角?)</div>
    <!--浮动的元素永远不会超过他上边的兄弟元素,最多一边挤-->
</div>
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

Clear float and float effect

In the flow of the document , the default height of the parent element is the element of distraction quilt, which is the child element of how high, how high on the parent element.

But after the child elements float, because out of the document flow, so the child elements can not prop up the height of the parent element leading to the disappearance of the height of the parent element. The elements will move back up eventually lead to confusion page layout.

Clear float method (for father and son element):

The height of the parent element specifies a direct-coded (not recommended)

Clear float Method 2 (for parent-child element):

To the parent element is turned on BFC.

Clear Floating Method 3: Clear float clear (for siblings)

clear float can be used to remove other elements affect the current element, just scavenging, after clearing the float. elements will return to the position before the other elements float

If the preceding element is left floating: clear: left

If the foregoing elements are floating right: clear: right

Clear float height collapse led to problems (father and son element):

Directly in the collapse of the parent element height Finally, add an empty div, and set clear

However, this method can therefore be used to add redundant code css add dummy elements:

.父元素:after{
content:"";
display:block;
clear:both;
}