CSS-float and css-float

CSS-float and css-float

Float is a powerful attribute, but it also bothers us if we don't know how it works. This article mainly introduces the principle and basic usage of float.

We can see the application of float in the printing world-magazine. many magazine articles use a picture on the left, and the text on the right is floating around the picture on the left. in the HTML/CSS world, if there is a floating image, the text will be wrapped around it, just like the layout of a magazine. images are only one of the many floating attributes. We can also achieve two-column (Multi-column) la s by floating. in fact, we can use floating (Block Element) on any HTML element ).

Floating Definition

Definition from W3C:

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or “floated” or “floating” box) is that content may flow along its side (or be prohibited from doing so by the “clear” property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.

In short, the floating element is set to float to the corresponding left or right, and the content is filled to the corresponding place of the floating element.

Floating has four property values: left | right | inherit | none, which are left floating, right floating, inherited (from the floating property value of the parent element) and none.

Example of a magazine effect:

Magazine effects floating

The image style is:

img {     float: right;    margin: 10px;}

 

Floating Performance

HTML has a rule: normal document flow. in normal document flow, each block element (div, p, h1 ...) line breaks. floating elements are first laid out in normal document flows, and then displayed on the left or right of the parent element from normal document flows. the floating element is displayed next to the element instead of line feed.

Let's look at an example: Three floating blocks are not set.

Block Element style:

.block {     width: 200px;    height: 200px;}

The three blocks are displayed in the normal document flow. Each element is at the bottom of the previous element. Now we have set the three blocks to float left:

.block {     float: left;    width: 200px;    height: 200px;}

The result is as follows: Float left

After floating, each block element follows the floating element. if the parent element does not have enough width, the floating element will automatically wrap it. look at this example and try to narrow down the browser window. The floating block elements will automatically wrap.

 

Clear floating

The floating element is out of the normal document flow, so it will affect the structure of the document after the floating, so we need to clear the floating after the floating element, restore the document structure to a normal document flow. there are many methods to clear floating. The first basic method is the corresponding clear attribute.

Clear property value: left | right | both | inherit | none. The corresponding floating value is cleared accordingly. let's take a floating example. There are four block elements, the first two are floating, and the last two are not floating. The structure is as follows:

<div class="block pink float"></div><div class="block blue float"></div><div class="block green"></div><div class="block orange"></div>

.block {    width: 200px;    height: 200px;}.float { float: left; }.pink { background: #ee3e64; }.blue { background: #44accf; }.green { background: #b7d84b; }.orange { background: #E2A741; }

Here is the result.

Where is the green block? Then look at the source code and select the HTML of the green block, which is originally at the bottom of the pink block. as we expected, the two floating elements are displayed on the left and in a row, but they are already out of the normal document stream, as if they are not there. therefore, the first element without floating occupies its position and is covered by floating elements. so we need to clear the float so that the green block is displayed.

The code structure is as follows:

<div class="block pink float"></div><div class="block blue float"></div><div class="block green clear"></div><div class="block orange"></div>

.block {    width: 200px;    height: 200px;}.float { float: left; }.clear { clear: left; }.pink { background: #ee3e64; }.blue { background: #44accf; }.green { background: #b7d84b; }.orange { background: #E2A741; }

By using the clear: left css style, the green block is displayed. Clearing the float correctly will not affect the normal document flow.

 

Layout with floating attributes

When DIV layout is used, DIV + float is a method that most of us like to implement column layout. Let's look at a simple two-column layout.

CSS:

#container {    width: 960px;    margin: 0 auto;}#content {    float: left;    width: 660px;    background: #fff;}#navigation {    float: right;    width: 300px;    background: #eee;}#footer {    clear: both;    background: #aaa;    padding: 10px;}

By setting # content left floating, # navigation right floating, the total width is # container to achieve the layout of the two columns. note that # footer must clear the float. because both the left float and the right float exist, clear: both is used to identify the float on both sides.

Let's take a look at the result if # footer is not cleared.

 

Floating first

Floating elements placed in different locations in HTML will also generate unwanted display results. Let's take a look at an example.

In the example, the image float to the right and before the unfloat element P in the HTML structure. The code structure is as follows:

<div id="container">        <p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p></div>

#container {    width: 280px;    margin: 0 auto;    padding: 10px;    background: #aaa;    border: 1px solid #999;}img {    float: right;}

Now we change the HTML structure and place the floating element IMG behind the P element.

<div id="container">    <p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p>    </div>

Specific effect stamp here

The image is not included in # container at this time, because in the floating priority principle, the previous example shows that the floating element is before the floating element, so the result is within our expectation, but now we do not follow this rule to write our HTML structure, so the image Overflows out of its parent element, because of collapsing.

Collapsing appears when a parent element contains floating elements and these floating elements are not in the correct way around the unfloating element. as in the above example, the floating element IMG is not in # container.

One of the most common ways to fix this problem is to add an element with the floating property after our floating element, which is similar to the way we previously cleared the floating property, an additional element is added. The Code is as follows:

<div id="container">    <p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p>        <div style="clear: right;"></div></div>

However, adding an additional line of code is not a good method. Below we have several other methods.

Now there is an HMTL. A parent element has three floating images. The code structure is as follows:

<div id="container">            </div>

#container {    width: 260px;    margin: 0 auto;    padding: 10px 0 10px 10px;    background: #aaa;    border: 1px solid #999;}img {    float: left;    margin: 0 5px 0 0;}

We can quickly realize that the parent element does not contain floating images. Because the floating element is not in the document stream, it is empty for the parent element.

Now we use CSS to fix this issue, instead of adding additional HTML tags. there is a way for the parent element to clear its floating-overflow: hidden. note that the overflow attribute is not designed to clear the float. It can hide the content and scroll bar. now we use this attribute on # container.

#container {    overflow: hidden;    width: 260px;    margin: 0 auto;    padding: 10px 0 10px 10px;    background: #aaa;    border: 1px solid #999;}

Display result stamp here

You can also use the pseudo-class selector to clear the floating:

#container:after {    content: ".";    display: block;    height: 0;    clear: both;    visibility: hidden;}

Summary:

Floating can make your layout more casual and responsive, and there are also many ways to clear the floating, choose the method you like most, make the layout more beautiful.