css--Floating

• Why do I have to float/float?

The direct reason for the first appearance of the float is to implement the picture wrapping text; In the course of history, floating also stretched its foot into the page layout, becoming a stable scorer for the page layout.

• What is float?

Floating is a very important property in CSS, and the element is set by the value of the Float property: Left and right, you can make the element float to the other, until its outer edge touches the border of the containing box or another floating box, thus fulfilling the requirement;

• What are the characteristics of float?

1. Destructive:

Because the float box is not in the normal flow of the document, the Block box in the normal flow of the document behaves as if the floating box does not exist, which is what we often call a float that is destructive, that is, it causes the parent element to collapse highly.

is destructive a cancer?

Yes, don't believe you look down!

When not floating:

The HTML code is as follows:

<section>    <div></div></section><footer>    Lorem ipsum dolor sit amet, Consectetur adipisicing elit. Aliquam aliquid blanditiis consectetur corporis ducimus ea eaque, Eius, facere fugiat impedit itaque Nemo Perferendis Quo Rem Sint sit suscipit, Totam voluptas!</footer>

The CSS code is as follows:

* {margin:0; padding:0;}  body {padding:20px;}  Section {border:1px solid #ccc;}  div {width:100px; height:100px;}  Div:nth-of-type (1) {Background-color:orange;} footer {border:1px solid #00ff00; margin-top:10px;}

Results such as:

　　

When not added floating, the browser according to the standard flow rendering, Ding, there, everyone in accordance with the order, everything is reasonable!

When adding Float:left:

The HTML code is as follows:

　　

<section>    <div></div>    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, Perferendis, veritatis! Aliquam Aut ea eaque earum est, et, labore laboriosam laborum odio perferendis Porro Provident, Quidem Quo rerum sunt unde .</section><footer>     <p></p></footer>

The CSS code is as follows:

* {margin:0; padding:0;} body {padding:20px;} section {border:1px solid #ccc;} div {width:100px; height:100px;} div:nth-of-type (1) {background-c Olor:orange; Float:left; margin-left:10px;}  Footer {border:1px solid #00ff00; margin-top:10px;}
P {background-color: #ef0000; width:100px; height:100px;}

The results are as follows:

　

I added a float:left to the DIV tag, (and also gave the 10px left margin, which can be seen from the parent element section height collapse, but the width has not changed), section no longer surrounds the floating element, it only surrounds the non-floating elements, to achieve the effect of text wrapping. However, footer was brought up by the damned, next to the first block-level element--section. Next to the same, it is hidden in the orange square behind, what? Still holding the pipa half cover! Is this the result we want? Obviously not, we hope that the Orange square and the red box who is not in the way, everyone happy to see the audience together, now make this look, what ghost?

　　In the CSS Design guide, the floating element is outside the document flow, so it is no longer contained within the parent element of the tag. Because of this, it can have a devastating effect on the layout.

　　Here is a question for me, why the text will be around the floating elements??? Please also ask friends to dispel questions, thank you!

　　2. Parcel Sex

A float is a display:inline-block property with a bearing. In CSS, any element can float. A floating element generates a block-level box, regardless of its own element. Specifically not clear, here put a link, we learn together. http://www.zhangxinxu.com/wordpress/2010/01/cssfloat%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7% a9%b6%e3%80%81%e8%af%a6%e8%a7%a3%e5%8f%8a%e6%8b%93%e5%b1%95%e4%b8%80/.

css--Floating