Detailed CSS Float property

Read Catalogue

• Basic knowledge
• Detailed details of float
• Float Special case
• Clear Property
• Clear floating
• Application of float
• Summarize

The Float property in CSS is a frequently used property, and for beginners, if you do not understand the meaning of floating and the characteristics of the performance, the use of the use is easy to fall into confusion, foggy, confused state. This article will start with the most basic knowledge, talk about floating applications, problems and solutions.

Back to top Basics

float, as the name implies, floats, the element that sets the float property floats to the left or right according to the property value, and we call the element with the Float property set as a floating element.
The floating element is detached from the normal document stream, but the floating element affects not only itself, it affects the surrounding element alignment. Examples are as follows:
HTML code:

1 <div class= "box" >2         <span class= "Float-ele" >3             floating element 4         </span>5         Ordinary document flow Normal document flow Ordinary document flow ordinary document flow ordinary document flow ordinary document flow ordinary document flow ordinary document flow ordinary document flow common documents flow ordinary document stream plain document flow ordinary documents stream ordinary documents flows normal document streams general documents streaming 6 </div>

CSS code:

1. Box {background: #00ff90; padding:10px; width:500px;} 2. Float-ele {float:left; margin:10px; padding:10px; background: #ff6a00; width:100px; text-align:center;}

Float Basic Effect

As you can see, the text around the span element revolves around the span element, and the span element that sets the float property becomes the sense of a block-level element, and you can set the width and Height properties. This is the effect of setting the float property, and the detailed details of float are explained in detail next.

Go back to the top of float for detailed details

Before we explain the detailed details of float, we need to understand a concept first.
Include Block: The containing block of the floating element is the block-level ancestor element closest to the floating element, in the example described earlier, Div.box is the containing block of the span element.

After understanding the concept of the containing block, first describe the first attribute of the floating element: whether an element is an inline element or a block-level element, if a float is set, the floating element generates a block-level box that can set its width and height, so float is often used to create a menu with horizontal columns, You can set the size and arrange horizontally.

The display of floating elements will have different rules under different circumstances, so let's explain these rules in one by one.
1. Floating elements in the float, the margin will not exceed the padding containing the block
This is simple, floating elements cannot float beyond the inner bounds of the containing block
HTML code

<div class= "box" > <span class= "rule1" >   floating elements </span></div>

CSS Code

1. Box {background: #00ff90; padding:10px; width:500px; height:400px;} 2         . rule1 {float:left; margin:10px; padding:10px; background: #ff6a00; width:100px; text-align:center;}

Float Rule One

In this example, the box's padding is 10px, and the margin of the floating element is 10px, which together is 20px, that is, the floating element will not exceed the padding containing the block.
PS: You can set the margin property if you want the element to be exceeded

2. If there are multiple floating elements, the margin of the trailing floating element will not exceed the margin of the preceding floating element
Simply put, if there are multiple floating elements, the floating elements will be sorted in order without overlapping.
Modify the HTML code in the previous example as follows:

1 <div class= "box" > 2         <span class= "Rule1" > 3             Floating element 1 4         </span> 5         <span class= "Rule1 "> 6             Floating elements 2 7         </span> 8         <span class=" Rule1 "> 9             floating elements 310         </span>11     < /div>

As follows:

Float Rule Two

, the floating elements will be sorted one after the other without overlapping occurrences.

3. If two elements one floats to the left and one floats to the right, the marginright of the left floating element will not be adjacent to the marginleft of the right floating element.
What do you mean, we have to look at it in two different situations.
(1) The total width of the containing block is greater than two floating elements, for example:
HTML code:

1 <div class= "box" >2     <span class= "Rule1" >3         floating elements </span>5 <span class=     "Rule2 ">6         floating element     </span>8 </div>    

CSS Code

1. Box {background: #00ff90; padding:10px; width:500px; height:400px;} 2. rule1 {float:left; margin:10px; padding:10px; background: #ff6a00; width:100px; text-align:center;} 3. rule2 {float:right; margin:10px; padding:10px; background: #ff6a00; width:100px; text-align:center;}

Float Rule three conditions 1

This is simple: the width of the containing block element is large enough, two elements one floats to the left, one to the right, and squarely to the other.

(2) The sum of the width of the containing block is less than two floating elements
Modify the width of the floating element to 300px,css code as follows:

. rule1 {float:left; margin:10px; padding:10px; background: #ff6a00; width:300px; text-align:center;}. rule2 {float:right; margin:10px; padding:10px; background: #ff6a00; width:300px; text-align:center;}

Float Rule three conditions 2

If the containing block width is not high enough, the trailing floating element will float downward, with the top of the front floating element at the bottom, if shown.

4. The top of the floating element does not exceed the bottom of the inner boundary of the containing block, and if there are multiple floating elements, the top of the next floating element does not exceed the bottom of the previous floating element
This rule simply means that if there are multiple floating elements, then the element height will not exceed the previous element and will not exceed the containing block. Examples are as follows:
HTML code:

1 <div class= "box" > 2 <p> before floating element before floating element before floating, before floating element before floating element before floating element, before floating element, before float, before floating element         , </p > 3         <p class= "Rule1" > 4 floating element 1 floating element 1 floating element 1 floating element 1 floating element 1 floating element 1 floating element 1 floating element 1 floating element 1 floating element 1 floating element 1             floating element 1 5         </p > 6 <p> after a floating element after a float after a floating element after a floating element after a floating element after a floating element after a floating element after a float element         </p> 7         <p class= "Rule1" > 8 floating element 2 floating element 2 floating element 2 floating element 2 floating element 2 floating element 2 floating element 2 floating element 2 floating element 2 floating element 2 floating element 2 floating element             2 Floating element 2 9         </p>10     </div>

CSS Code

1. Box {background: #00ff90; padding:10px; width:500px; height:400px;} 2. rule1 {float:left; margin:10px; padding:10px; background: #ff6a00; width:250px; text-align:center;} 3 p {margin-top:20px; margin-bottom:20px;}

Float Rule Four

, two floating elements, followed by floating elements will not exceed the preceding floating element

5. If a non-floating element and a floating element exist at the same time, and the non-floating element is in front, then the floating element will not be higher than the non-floating element
This rule is also obvious, in the example of the 4th rule, the floating element has a non-floating element p, and the floating element does not exceed it.

6. Floating elements are aligned as far as possible to the top, left or right
Under other rules, floating elements are aligned as far as possible to the top, left or right, and in the example of the 4th rule, the floating elements are as close to the non-floating p-element as possible, and align to the left

Float rule six back to top float special case

Some of the rules that float needs to follow are discussed above, and these are the results shown in more common scenarios. Let's talk about some of the less common situations.

Extensibility of floating elements

Before we talk about the extensibility of floating elements, let's first consider a more specific example.
We put the span element inside the P element and set its height above the P element and left floating, the key of this example is higher than the parent element at the floating element height.
HTML code

1 <p>2 before the floating element before the floating element, before the floating element, before the floating element, before the floating element before the float, before the float element, before the floating elements,         3         <span class= "high-float ">4             floating element 5 higher than parent element         </span>6     </p>7     <p> After a floating element after a floating element after a floating element after a floating element after a floating element after a floating element after a floating element after a floating element </p>

CSS Code

1 p {margin-top:20px; margin-bottom:20px; Background-color: #00ff21; width:500px;} 2. high-float {float:left; height:80px; line-height:80px; background-color:orangered;}

Floating element height greater than parent element

In this example, the floating element is taller than the parent element, and you can see that the floating element is outside the parent element's bottom.
How to solve this situation, as long as the parent element is also set to float, we set the first P element to a left float, the effect is as follows

Floating element Extensibility

When the parent element p is set to Float:left, the floating element is included in the parent element, and we make this feature an extensibility for floating elements.
What is the extensibility of a floating element, which we can understand as the element is set to float and the element extends to contain all of its floating child elements

Floating element exceeds the padding of the parent element

The first rule mentioned above: The outer bounds of a floating element do not exceed the inner bounds of the parent element. In most cases, the scenarios we see are consistent. But there are some special cases.
(1) Negative margin
We set the margin-left of the floating element to a negative number.
HTML code:

1 <p>2 before the floating element before the floating element before the floating element, before the floating element, before the floating element, before the float, before the floating element, before the float, before the floating element,     3     <span class= " Minus-margin ">4         negative margin-left5     </span>6 </p>

CSS code:

1 p {margin-top:20px; margin-bottom:20px; margin-left:50px; Background-color: #00ff21; width:500px;} 2. minus-margin {float:left; height:80px; line-height:80px; background-color:orangered; Margin-left: -20px;}

Floating elements of negative maring

Is it not a violation of the first rule that the floating child element clearly exceeds the inner boundary of the parent element after Margin-left is set to a negative number?
However, it is reasonable to think about this, because by default marign-left is 0, so it does not go beyond the inner bounds of the parent element, but after it is set to a negative number, it is equivalent to the floating element covering its own inner boundary.
We look at the problem from a mathematical point of view, in this case:
The parent element's margin-left:50px,padding and border default to 0, which means that the inner boundary is 50px from the left side of the browser.
Floating child elements By default, the pixels to the left of the browser should be 50px, but when set to margin-left:20px, the browser calculates:
50px+ ( -20px) margin+0border+0padding=30px. Closer to the left side of the browser, so the parent element is exceeded.

(2) The width of the floating element is greater than the parent element width
What happens if we set the width of the floating element to be greater than the parent element?
Element left floating, width greater than parent element
HTML code

1 <p>2 before a floating element before a floating element, before a floating element, before a floating element, before a floating element, before a float, before a floating element, before a float,     3     <span class= "Big-width" >4         width greater than parent element 5     </span>6 </p>

CSS Code

1 p {margin-top:20px; margin-bottom:20px; margin-left:50px; Background-color: #00ff21; width:250px;} 2. big-width {float:left; height:80px; line-height:80px; background-color:orangered; width:300px;}

Floating element with large width

When floating elements are left floating and the width exceeds the parent element, it exceeds the right inner boundary of the parent element due to the large width of the floating element
What happens if you set it to float right?

Floating element with large width

As you can see, the left inner boundary of the parent element is exceeded when the right float is set.

Overlap Issues

Overlap problem refers to the problem where the two elements are in the same position, and the upper and lower overlap occurs. What happens if the floating element overlaps with the normal document flow?
First, the floating elements will be how to overlap, set its margin-top negative. Let's look at an example:
HTML code:

1 <p>2 <span>3 before a floating element before a float, before a floating element before a floating element, before a floating element, before a floating element, before a floating element             . 4         </span>5         <span class= "overlay" >6             floating elements overlap 7         </span>8     </p>

CSS Code

1 p {margin-top:20px; margin-bottom:20px; margin-left:50px; Background-color: #00ff21; width:250px;} 2. Overlay {float:left; height:80px; line-height:80px; background-color:orangered; width:300px; Margin-top: -30px;}

As follows:

Overlapping issues with floating elements

This is true if the floating element does not set a negative margin

Overlapping issues with floating elements

In this example, you can see that the content of the normal flow element span in P is displayed above the floating element.
Let's try setting the background image for span with the following effect:

Overlapping issues with floating elements: background map

element sets the background, the overlapping part will still show the background

What happens if a span tag is replaced with a div tag?
HTML code:

1 <p>2      <div style= "Background-image:url (.. /images/banner1.jpg) ">3 before the floating element before the floating element, before the floating element, before the floating element, before the floating element, before the floating element, before the floating element          . 4      </div>5      <span class= "overlay" >6          floating elements overlap 7      </span>8  </p>

Overlapping issues with floating elements: block-level elements have a background map

In this case, the overlapping sections do not display the background picture.

Summarize the differences between the two cases:
1. Inline elements overlap with floating elements, their borders, backgrounds, and content are displayed above the floating elements
2. When a block-level element overlaps with a floating element, the border and background appear below the floating element, and the content is displayed above the floating element

Back to top Clear property

Sometimes, we don't want some elements to be affected by the floating element next to it, so we need to use the clear attribute.
Clear property: Ensures that there are no floating elements on the left or right side of the current element.
Let's give an example to illustrate:
Let's say that there are 3 floating div as follows:

3 floating elements

Its HTML code and CSS code are as follows
HTML code:

1 <div class= "box" >2         <div class= "float" > floating element 1</div>3 <div class=         "float" > floating element 2</ Div>4         <div class= "float" > Floating elements 3</div>5     </div>

CSS code:

1  . float {float:left; width:150px; background: #0094ff; border:1px solid red; margin-left:5px;} 2. CL {clear:left;} 3. cr {Clear:right;} 4. cb {Clear:both;}

Suppose we want to let the second floating element float on a different line, what should we do?

Based on the definition of the Clear property: Ensure that there are no floating elements on the left and right sides of the current element.
We add a clear:right to the first floating element to ensure that there are no floating elements on the right. Modify the HTML code as follows:

1 <div class= "box" >2     <div class= "float cr" > floating element 1</div>3 <div     class= "float" > floating element 2 </div>4     <div class= "float" > Floating elements 3</div>5 </div>

View results found nothing changed

The 1th element clears a float

This method is wrong!!

Let's try adding a clear:left to the second element to ensure that no floating elements appear on the left side. Modify the HTML code as follows:

1 <div class= "box" >2     <div class= "float" > floating element 1</div>3 <div     class= "float cl" > floating element 2 </div>4     <div class= "float" > Floating elements 3</div>5 </div>

The 2nd element clears a float

You can see that this clear property has an effect.

Also set the Clear property, why does this result?
When using the clear attribute, remember thatclear only works on the layout of the element itself .
In the previous example, the first floating element added the clear property, which does not affect the layout of other elements, only affects itself, so the second floating element does not have another row.
When the second floating element is set to clear, we can see that clear acts on itself, so the element is on a different line.

Back to top clear float

Clear float is a frequently mentioned thing, first of all we have to understand what is the problem of using floating, and why to clear the float.
We know that a block-level element that is not set to height is stretched by a child element. When a pair element is floating, the child element is detached from the standard document flow, meaning that no content in the parent element can open its height so that the height of the parent element is ignored, which is called a height collapse. To solve this problem, we are going to use clear float.
There are many ways to clear the float, and here's how each one is described.

For IE browser, to clear the problem of floating, only need to trigger haslayout, directly set the style zoom:1 can be triggered. About Haslayout knowledge, here is not detailed here, after we specifically talk about this thing, interested students can first check the relevant information.

For non-IE browsers, there are several main methods:

Add extra div

This is the simplest and most straightforward way to add a floating element to the content of its parent element (as the last child element)

1 <div style= "Clear:both" ></div>

This clears the problem caused by floating elements.

Advantages: Simple and straightforward, the method that beginners often use, also easy to understand
Cons: Add extra meaningless tags that are not conducive to semantics, adding extra empty tags to each purge, resulting in wasted

Parent element Add Overflow:hidden

The key to this approach is that triggering the BFC,BFC is one of the difficulties in CSS, and we will learn this concept later. Now just know that it can clear the effects of the float.

1. Clearfix{overflow:hidden;zoom:1}

Pros: Less code, no extra tags

Disadvantage: If the child element is outside the range of the parent element, it will cause the excess part to be hidden

After pseudo element

After represents a child element, through which you can set a clear element and then hide it

1 clearfix:{2     zoom:13}4 clearfix:after{5     display:block; content: '; clear:both; height:0; visibility:hidden; 6}

The principle of this method is the same as the first method, which is to generate an element to clear the float, except that the element is "false".

Pros: No extra labels, it's a better way to combine
Cons: slightly complicated, but it's easy to understand the principle
It is recommended to use this method.

Back to the top float application

Having said so many principles of float and possible problems, we will talk about the application of float.

Text Wrapping Effect

The initial application of float is the text wrapping effect, which is useful for illustrated articles. Our simple distance illustrates:
HTML code

1 <div class= "box" >2         3         I was wrapping the text I was wrapping the text I was wrapping the text I was wrapping the text I was wrapping the writing I was wrapping text I was wrapping text I was wrapping text I was wrapping text I was wrapping text I was wrapping writing I was wrapping text I was wrapping text 4     </div>

CSS code:

1. Box {background: #00ff90; padding:10px; width:500px;}  2. Float {background: #0094ff none repeat scroll 0 0;border:1px solid red;float:left;margin-left:5px;width:400px;}

Text Wrapping Effect

This makes it easy to achieve the text wrapping effect.

Horizontal menu Arrangement

In the previous Display:inline article on the application of CSS Display:inline-block, we mentioned the implementation of the horizontal arrangement menu, the first is to use the float property to achieve, it can be very simple to achieve the effect of the horizontal menu.
HTML code:

1 <ul class= "menu Clearfix" >2     <li> Home </li>3     <li> politics </li>4     <li> Entertainment </li>5     <li> Sports </li>6     <li> Games </li>7 </ul>

CSS code:

1. Clearfix: {zoom:1;} 2     . clearfix:after {display:block; content: '; clear:both; height:0; visibility:hidden;} 3. Menu {background: #0094ff; width:500px;} 4     . menu Li {float:left; width:100px; list-style-type:none;}

：

Landscape Menu

This way it is easy to achieve the horizontal menu effect, but it is important to pay attention to clear floating, we recommend the use of Display:inline-block to achieve

Layout

The most frequently used scenario for float is the layout. Using float makes it easy to implement layouts and is easy to understand. Let's implement a fixed layout with a three column and two columns.
HTML code:

1 <div class= "header" > 2     I was head 3 </div> 4 <div class= "Content Clearfix" > 5     <div class= "side" & GT, left </div> 6     <div class= "main" > 7         Right 8     </div> 9 </div>10 <div class= "Footer" >11     I am the bottom </div>

CSS Code

1. Clearfix: {zoom:1;} 2     . clearfix:after {display:block; content: '; clear:both; height:0; visibility:hidden;} 3. Header,. footer {height:50px; background: #0094ff; text-align:center;} 4. Content {margin:0 auto; width:1000px; background: #000000;} 5. Side {float:left; height:500px; width:280px; background: #ff006e;} 6. Main {float:right; height:500px; width:700px; background: #fbcfcf;}

Three column and two columns layout

This is a very common layout, to be aware of is to clear the floating problem.

Float Common application is probably these kinds of, of course, it exists more applications waiting for everyone to dig, welcome to communicate!!

Back to top of the summary

The Float property is a frequently used property, it is necessary to understand its characteristics, otherwise it is easy to foggy unclear situation. The most important thing about float is to understand the following points:
1.float causes elements to flow out of the document
2.float several rules for influencing elements
3. Floating problems and how to clear the float

Original address: http://luopq.com/2015/11/08/CSS-float/

Detailed CSS float property (GO)