CSS Floating Use Tips

This time for everyone to bring CSS floating use of skills, CSS floating use of the note what, the following is the actual case, together to see.

Floats have the following characteristics:

1. Text that can't be covered

2. After a floating element is not a block-level element, the next element will be next to it (unless the width of the element is set and the screen will wrap if it does not fit)

3. The previous element of the floating element, if not floating, floats only in the current row, and when floats encounter floats, they are sorted in one row unless there is no position.

4. When the element is set to absolute, fixed, the float is ignored

5. Float causes parent element height collapse

6. Floating elements are affected by the margin-top of the latter element

Text that can't be covered

<style>        body,p{            margin:0;            padding:0;        }       p{           width:100px;           height:100px;       }        . item1{            Float:left;            Background-color:pink;        }        . item2{            background-color: #58d3e2;        }    </style><p class= "item1" >item1</p><p class= "item2" >item2</p>

As you can see, ITEM2 's p except for the text, the rest of the content is invisible, because it runs under the item1. Why is the text not covered by floating elements? Because the essence of floating is to achieve text wrapping.

It can also be concluded that the block-level element behind the floating element occupies the position of the floating element, and that the floating element is always above the standard flow element.

A floating element is not followed by a block-level element, and the next element will be next to it (unless the width of the element is set and the screen will not wrap when it does not fit)

<style>        body,p{            margin:0;            padding:0;        }       p{           width:100px;           height:100px;       }        . item1{            Float:left;            Background-color:pink;        }        . item2{            Display:inline-block;            Background-color: #58d3e2;        }    </style><p class= "item1" >item1</p><p class= "item2" >item2</p>

The previous element of the floating element, if not floating, floats only in the current row, and when floats encounter floats, they are sorted in one row unless there is no position.

<style>        body,p{            margin:0;            padding:0;        }       p{           width:100px;           height:100px;       }        . item1{            background-color:pink;        }        . item2{            Float:left;            Background-color: #58d3e2;        }    </style><p class= "item1" >item1</p><p class= "item2" >item2</p><p class= "Item3" > Item3</p>

<style>        body,p{            margin:0;            padding:0;        }       p{           width:400px;           height:100px;           Float:left;       }        . item1{            background-color:pink;        }        . item2{            background-color: #58d3e2;        }        . item3{            background-color: #61dafb;        }        . item4{            background-color: #e9203d;        }    </style><p class= "item1" >item1</p><p class= "item2" >item2</p><p class= "Item3" > Item3</p><p class= "Item4" >item4</p>

You can set the width to a percentage to achieve adaptive

p{           width:25%;           height:100px;           Float:left;       }

When the element is set to absolute, fixed, the float is ignored

<style>        body,p{            margin:0;            padding:0;        }       p{           Position:absolute;           Float:left;           width:100px;           height:100px;           border:1px solid red;       }    </style> <p class= "item1" > Floating position </p>

The inline element uses a float to generate a block box, so it can use attributes such as width,height,margin,padding.

<style>        body,p{            margin:0;            padding:0;        }       [class^= ' Item '] {           float:left;           width:100px;           height:100px;           line-height:100px;           Text-align:center;       }        . item1{            Float:left;            Background-color:pink;        }        . item2{            Display:inline-block;            Background-color: #58d3e2;        }    </style><span class= "item1" >item1</span><p class= "item2" >item2</p>

Float causes parent element height collapse

In web design, a very common situation is to give the content of a p as a parcel container, and this package container does not set the height, but let the contents of the inside open the height of the container. If you do not set the child element to float, there is no problem, and once the child element is set to float, the parent element will not be able to adapt to the height of the floating element, the parent element height is 0, so the background color and so on can not be displayed. The reasons are:

Because the P-height is not pre-set, the P-height is determined by the height of the child element it contains. Instead of floating out of the document stream, the child elements are not computed in height. At this point in P, the equivalent of the P neutron element height is 0, so the parent element height collapse phenomenon occurs.

   <style>        body,p{            margin:0;            padding:0;        }        . item{            Float:left;            width:100px;            height:100px;            Background-color:pink;        }    </style>   <p class= "box" >       <p class= "item" ></p>   </p>

Solution,

1. Add "Overflow:hidden" to the parent element

Of course it can be "Overflow:auto". But in order to be compatible with IE best with overflow:hidden.

. box{  Overflow:hidden;}

So why is "Overflow:hidden" going to solve this problem?

is because "Overflow:hidden" triggers BFC,BFC, which in turn determines how "Height:auto" is calculated.

, that is, when the height of the BFC is calculated, the floating element is also involved in the calculation, so the parent element is adaptive to the height of the floating element.

So, you can also set the "Display:inline-block", "Position:absolute", "float:left" to solve the problem of the high collapse of the parent element. Because you can create a BFC, you can achieve the effect of wrapping the floating child elements. So the internet is said to be "BFC can wrap floating elements."

2. Add pseudo elements after or before the contents of the parent element + clear Float

You can add a pseudo-element to the contents of the parent element by using:: Before or:: After, then the contents are empty, so that the position is not occupied and the pseudo element is then "Clear:both" to clear the float.

<style>        body,p{            margin:0;            padding:0;        }        . box::after{            content: ";            Display:block;            Clear:both;        }        . item{            Float:left;            width:100px;            height:100px;            Background-color:deeppink;        }    </style><p class= "box" >    <p class= "Item" ></p></p>

Why is this possible?

Figure out why you need to know two points: first, the actual role of pseudo-elements, and the other is that the CSS clear floating (clear) can only affect the use of cleared elements themselves, can not affect other elements, and clear floating can be understood as breaking the horizontal arrangement.

First we need to get rid of: After and:: Before, they do not insert a pseudo-element behind or in front of an element, but instead insert a pseudo-element (inside the element) behind or before the element content, which I have always thought: before and: after pseudo element The inserted content is injected into the pre-or post-injection of the target element, but the injected content will be a child of the associated target element, but it will be placed in the "before" or "after" of any content of this element. Let's take an example to see that. Box has a height of 300px, indicating that two pseudo-elements have been inserted into the. Box content.

<style>        body,p{            margin:0;            padding:0;        }        . box::before{            content: ' Before ';            height:100px;            width:100px;            Display:block;            Clear:both;            Background-color: #61dafb;        }        . box::after{            content: ' After ';            width:100px;            height:100px;            Display:block;            Clear:both;            background-color:aquamarine;        }        . item{            Float:left;            width:100px;            height:100px;            Background-color:deeppink;        }    </style><p class= "box" >    <p class= "Item" ></p></p>

So we use the following methods to clear the floating

. box::after{  content: ';  Display:block;  Clear:both;} Or. box::before{  content: ';  Display:block;  Clear:both;} Or. box::before,.box::after{  content: ';  Display:block;  Clear:both;} :: Before and:: After must be used with the content property to define what is inserted, the contents must have a value, or at least null. By default, display of pseudo-class elements is the default value of inline, which can be changed by setting Display:block.

Inserts a pseudo element before and after the contents of the parent element, and the content is empty to ensure that the position is not occupied (height is 0). "Clear:both" can clear the floating of the parent element, causing the. Box::before and. Box::after to encounter a floating element that wraps, thereby spreading the height, and the parent element adapts to that height so that it does not show a high collapse.

Other ways to resolve a height collapse are based on these two ideas, one is trigger BFC, one is add element + clear float (clear).

Floating elements are affected by the margin-top of the latter element

<style>        body,p{            margin:0;            padding:0;        }        p{            width:100px;            height:100px;        }        P:nth-of-type (1) {            float:left;            Background-color: #61dafb;        }        P:nth-of-type (2) {            margin-top:100px;            Background-color: #58d3e2;        }    </style><p >p1</p><p>p2</p>

You can see that the first P is also followed, and the solution is to set clear for the latter element, at which point the margin-top of the latter element will be invalid.

<style>        body,p{            margin:0;            padding:0;        }        p{            width:100px;            height:100px;        }        P:nth-of-type (1) {            float:left;            Background-color: #61dafb;        }        P:nth-of-type (2) {            clear:both;            margin-top:100px;            Background-color: #58d3e2;        }    </style><p >p1</p><p>p2</p>

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS cascading mechanism using detailed

Code and order of writing in CSS real-combat project