The floating of CSS and its application in layout

What is CSS float?

The Floating property (float) design in CSS is designed to address a scene that requires text to wrap around a picture when the page is displayed, similar to the text wrapping property in Word, and the underlying usage scenario is as follows:

Before floating:

After floating:

The code is implemented as follows (simplified version)

<style> img{        float:left; }  </style><div>        <p>xxx</p></div>

The use of float in the layout

float element design is the original intention, although the text around the picture, but the most widely used in the layout of the field, the following in addition to the introduction of how to apply in the layout, but also introduces several common float layout, the following gives the simplest flow style layout

1. Traditional streaming layouts

Each div occupies a row by default, regardless of the width of the line, and the core idea of the float layout is how to present these rows of data to him in an aesthetically pleasing way.

Code Demo

<div class="div1" style="background-color:red;height:100px;width:350px">    div1</div><div class="div2" style="background-color:blue;height:120px;width:200px">    div2</div><div class="div3" style="background-color:green;height:140px;width:50px">    div3</div><div class="div4" style="background-color:yellow;height:100px;width:600px">    div4</div>

2. What happens when we set the div2 to hover

Why does this happen? Div3 somehow shorter?
In fact, it is not div3 shorter, but div2 set floating out of the page flow, suspended in the other elements of the above, and div2 after the div3 natural upward supplement, with div4 the whole move, and was Div2 blocked part of the situation, so there is Compare to see div2 right float is clearer

3. What happens when the Div3 is suspended?

Similarly, here Div2 div3 out of the standard stream and suspended it, forming a new level; div4 directly up, partially obscured by Di2 and Div3

4. The basic principle is about to be introduced, so how to use float to make the above code beautiful effect?

code example (partial adjustment for aesthetics, focus on the key)

<style>    .div1,.div2,.div3{        float:left;        margin:0 10px;    }    .div4{margin:10 10px;}    .clear-fix::after {            content: "";            display: table;            clear: both;        }</style><main class="clear-fix"><div class="div2" style="background-color:blue;height:120px;width:100px;">    div2</div><div class="div1" style="background-color:red;height:100px;width:350px;">    div1</div><div class="div3" style="background-color:green;height:140px;width:50px;">    div3</div></main><div class="div4" style="background-color:yellow;height:30px;width:540px">    div4</div>

The final style is as follows, which is a very common three-column layout in a Web page

The floating of CSS and its application in layout