Float and clear float, float clear float
Float and clear float
I. float: The main purpose is to achieve the effect of text wrapping.
It also became the easiest way to create a multi-column layout.
<P> text content paragraph content </p>
[1] Text wrapping
P {margin: 0; border: solid 1px ;}
Img {float: left ;}
[2] create multi-Column Layout
P {margin: 0; border: solid 1px; width: 200px; float: left ;}
Img {float: left ;}
2. The floating element is out of the Document Stream, and its parent element cannot be seen, because it will not be surrounded, and the child element will have a height, and the parent element will not be supported, this is not what we want,
There are three solutions available below. Please check the situation and make appropriate use of them:
<Section>
<P> This is a paragraph. This is a paragraph. </p>
</Section>
<Footer> This is the bottom, this is the bottom </footer>
Section, footer {border: solid 1px ;}
Img {float: left ;}
[1] add overflow: hidden for the parent element; force the parent element to enclose the floating Element
The actual purpose of this statement is to prevent the parent element from being opened by a large amount of content. After the overflow: hidden application is applied, the parent element remains in the specified width, and the ultra-large child content is cut off by the container.
In addition, overflow: hidden has another function, that is, it can reliably force the parent element to include its floating child element.
It cannot be used on top-level elements in the drop-down menu. Otherwise, the drop-down menu as its sub-elements will not be displayed.
[2] float the parent element at the same time. The width of 100% is the same as the width of the browser, and the footer settings are cleared, so that footer will not squeeze to the side of the section.
Section {border: solid 1px; float: left; width: 100%}
Footer {border: solid 1px; clear: left}
Img {float: left ;}
It cannot be used for elements that are automatically centered by the outer margin. Otherwise, the data is not centered.
[3] add non-floating clear elements (pseudo elements)
. Clearfix: after {
Content :"";
Display: block;
Height: 0
Visibility: hidden;
Clear: both
}
3. How to clear a group without a parent element (img p is a group without a parent element)
<Section>
<P class = "clearfix"> text content paragraph content </p>
<P class = "clearfix"> text content paragraph content </p>
<P class = "clearfix"> text content paragraph content </p>
</Section>
. Clearfix: after {
Content :"";
Display: block;
Height: 0
Visibility: hidden;
Clear: both
}