A brief discussion on the characteristics of CSS float

This article introduces the characteristics of CSS floats. I would like to share it with you and leave a note for myself.

Floats have the following properties:

1. Unable to cover text
2. If the floating element is not followed by a block-level element, the following element will be placed side by side with it (unless the width of the element is set, and it will wrap if it cannot fit on the screen)
3. If the previous element of the floating element is not floating, the floating element will only float in the current row; when the floating element encounters the floating element, they will be sorted in one row unless there is no space left.
4. When the element positioning value is set to absolute or fixed, floating will be ignored.
5. float causes the parent element height to collapse
6. The floating element will be affected by the margin-top of the next element

Unable to cover text

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

As you can see, except for the text, all other contents of item2's div are invisible because it runs under item1. Why isn't the text covered by the floating element? Because the essence of floating is to achieve text wrapping.

It can also be concluded from the above that the block-level elements after the floating elements will occupy the position of the floating elements, and the floating elements are always above the standard flow elements.

If the floating element is not followed by a block-level element, the following element will be placed side by side with it (unless the width of the element is set, and it will not wrap if it cannot fit on the screen)

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

If the previous element of the floating element is not floating, the floating element will only float in the current row; when the floating element encounters the floating element, they will be sorted in one row unless there is no space left.

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

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

You can set the width as a percentage to achieve adaptation

 div{
           width:25%;
           height:100px;
           float: left;
       } 

When the element positioning value is set to absolute or fixed, floating will be ignored.

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

After the inline element uses floating, it generates a block box, so it can use attributes such as width, height, margin, padding, etc.

 <style>
        body,div{
            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>
<div class="item2">item2</div> 

float causes the parent element height to collapse

In web design, a very common situation is to give the content a div as a wrapping container, and this wrapping container does not set the height, but lets the content inside expand the height of the wrapping container. If you don't set floating for the child element, there will be no problem. However, once you set floating for the child element, the parent element will not be able to adapt to the height of the floating element, and the height of the parent element will be 0, so the background color and other things will not be displayed. The reasons are:

Because the div height is not set in advance, the div height is determined by the height of the child elements it contains. Floating is out of the document flow, so the height of the child elements will not be calculated. At this time, the height of the child element in the div is equivalent to 0, so the height of the parent element collapses.

   <style>
        body,div{
            margin:0;
            padding:0;
        }

        .item{
            float: left;
            width:100px;
            height:100px;
            background-color: pink;
        }

    </style>
   <div class="box">
       <div class="item"></div>
   </div> 

Solution:

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

Of course it can also be "overflow:auto". But for compatibility with IE, it is best to use overflow:hidden.

.box{
  overflow:hidden;
}

So why does "overflow:hidden" solve this problem?

This is because "overflow:hidden" triggers the BFC, which in turn determines how "height:auto" is calculated.

, that is, when calculating the height of BFC, floating elements are also involved in the calculation, so at this time the parent element will adapt to the height of the floating elements.

Therefore, you can also set "display:inline-block", "position:absolute", and "float:left" to solve the problem of parent element height collapse. Because as long as you can create a BFC, you can achieve the effect of wrapping floating child elements. Therefore, it is said on the Internet that "BFC can wrap floating elements".

2. Add pseudo elements behind or before the parent element content + clear floating

You can add a pseudo-element to the content of the parent element, using ::before or ::after, and then make the content empty so that it does not occupy the position. Finally, add "clear:both" to the pseudo-element to clear the float.

 <style>
        body,div{
            margin:0;
            padding:0;
        }
        .box::after{
            content: '';
            display: block;
            clear:both;
        }
        .item{
            float:left;
            width:100px;
            height: 100px;
            background-color: deeppink;
        }

    </style>
<div class="box">
    <div class="item"></div>
</div>

Why is this possible?

To understand the reason, we need to know two points: one is the actual function of pseudo-elements, and the other is that CSS clearing floats can only affect the element itself, not other elements, and clearing floats can be understood as breaking the horizontal arrangement.

First of all, you need to understand the role of ::after and ::before. They do not insert a pseudo-element after or before an element, but insert a pseudo-element after or before the element content (inside the element). Before, I always thought that the content inserted by the :before and :after pseudo-elements would be injected before or after the target element. In fact, the injected content will be the child element of the associated target element, but it will be placed "before" or "after" any content of this element. Let’s take an example. You can see that the height of .box is 300px, which means that the two pseudo-elements have been inserted into the .box content.

<style>
        body,div{
            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>
<div class="box">
    <div class="item"></div>
</div> 

In summary, we often use the following methods to clear 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 attribute. Content is used to define the inserted content. Content must have a value, or at least be empty. By default, the display of pseudo-element is the default value inline, which can be changed by setting display:block.

Insert a pseudo-element before and after the content of the parent element. Setting the content to empty ensures that it does not occupy any position (the height is 0). "clear:both" can clear the left and right floats of the parent element, causing .box::before and .box::after to wrap when encountering floating elements, thereby expanding the height. The parent element will adapt to this height so that the height will not collapse.

Other methods to solve height collapse are based on these two ideas, one is to trigger BFC, the other is to add elements + clear floats (clear).

The floating element will be affected by the margin-top of the next element

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

    </style>
<div >div1</div>
<div>div2</div>

You can see that the first div also follows it down. The solution is to set clear for the next element. At this time, the margin-top of the next element will be invalid.

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

    </style>
<div >div1</div>
<div>div2</div> 

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.