CSS floating layout, detailed explanation of height collapse problem caused by floating layout

A must-read for zero basics of HTML - getting started with HTML, programming is so simple

1.What is float

1.1 Definition

Floating: The element breaks away from the document flow and then moves in the specified direction (left or right). It stops when it encounters the edge of the parent element or adjacent floating elements.

1.2 Note

After an element is set with a floating attribute, it has no effect on the elements in front of the element, but only affects the elements behind it.

1.3 float attribute value

• left element floats to the left;
• right element floats to the right
• none has no floating default value

2. Characteristics of floating

2.1. Elements can be arranged horizontally and displayed in one line

(Elements move in the direction set and will stop when encountering parent or adjacent floating elements. If multiple elements are floated, they will be displayed side by side)

2.2. Text and floating at the same level

(Text can feel the floating attribute, and the text content can be wrapped around the floating element)

2.3. Floating can be used to surround graphics and text

2.4. If an element is set with a floating attribute, the element becomes an element with the inline-block attribute.

(Supports internal and external margins, but does not support magrin:autoadaptive centering; width and height are expanded by content by default, and width and height attribute settings are supported)

2.5. Advantages of floating compared to inline blocks:

It can also be displayed horizontally, but floating solves the problem of gaps between elements and baseline alignment, and can align elements to the left (right). Therefore, it is generally recommended to use floating attributes for horizontal layout.

Specific display:

[1] Elements move in the set direction and stop when encountering parent or adjacent floating elements; if multiple elements are floated, they will be displayed side by side.

Here are the regular three box elements:

a. Set a floating attribute to the left for the first box:.div1{float: left;}
rendering:

At this point we discovered that the second green box was missing. In fact, it's not missing, it's just that Box 1 uses the floating attribute, which makes Box 1 float to the left in its original position. Because the left side is its parent body element, it stops moving to the left, so it is directly in the It floated on the original position. At this time, the second green box was affected to fill the position of the original box. That is to say, box one is floating on top of box two, so we can't see box two. .

b. Box one does not add a floating attribute, but adds a floating attribute to box two:.div2{float: left;}
the effect is:

because at this time, box two is floated to the left, which has no effect on box one. Box two floats to the left and encounters the parent level body, so it floats in the original position of box two. At this time, box three is affected, and box three moves up to fill the original position of box two. That is, at this time, box two is floating on top of box three, so box three cannot be seen.

c. Add floating attributes to all three boxes at the same time:

Rendering:

Box one floats to the left and stops when it encounters the parent body. When box two moves to the left, it encounters box one which also has the floating attribute, so box two stops after box one. Similarly, box three encounters the same floating property. The attribute box two has also stopped, so these three boxes can be displayed side by side.

[2] Text and float are at the same level
. Text can feel the floating attribute, and the text content can be wrapped around the floating element.

Let’s look at a piece of code first,

 <style>
        .box1 {
      
      
            float: left;
            width: 300px;
            height: 300px;
            background: green;
        }
        .box2 {
      
      
            width: 300px;
            height: 300px;
            background: pink;
        }
    </style>
</head>

<body>
    <div class="box1">我是盒子1</div>
    <div class="box2">我是盒子2</div>
</body>

We set up two boxes of the same size. If we add a float to the left to the first box, the first box will float on top of the second box and the second box will not be visible.
Take a look at the renderings:

We find that the second box is not completely covered, and the text inside the box can still be seen. That's because floating and text are at the same level. The text feels floating, so the text cannot go up.
In other words: after an element is set with a floating attribute, the next element will ignore the existence of this element, but the text content in the next element will still be there. Will make room for this element so that its own text content can wrap around the floated element. So we generally use it as image and text wrapping:

[3] Graphic and text wrapping: The text content will wrap around the floating element, and you can choose the floating direction.

[4] If the element is set with a floating attribute, the element becomes an element with the inline-block attribute: inner
and outer margins are supported, magrin:autoadaptive centering is not supported); the width and height are supported by the content, and the width and height attributes are supported. set up.
Let’s take a look at a rendering first:

We can find:

• Originally, the width of block-level elements was the same as the parent element by default and did not support row display. However, after using the floating attribute, the default width became self-expanding with content (of course you can also set it yourself), and it can also be displayed on the same line. This It clearly has the characteristics of block-level elements;
• Originally, inline elements did not support width and height settings, but after using the floating attribute, you can set it yourself, which obviously has the characteristics of block-level elements;
• Regardless of whether it is an inline or a block-level element, after using the floating attribute, internal and external margins are supported, but margin:auto;adaptive centering is not supported.

[5] Advantages of floating compared to inline blocks:
We have learned before that using inline block elements can display elements side by side, but there are several problems: after the rows are displayed, there are gaps between elements, and there are baseline alignment problems.
Using floats can also display elements side by side without these problems. Moreover, floats can also be left or right aligned by floating left and right. Inline blocks are obviously not possible, so when we use horizontal layout , often choose to float more.

3. Height collapse problem

3.1 What is height collapse?

When a parent box does not set a height, the child has a floating attribute. When the browser calculates the height of the box, it does not include the floating box, causing the height of the parent box to collapse and affect the layout.

<style>
        div{
      
      
            width: 1000px;
            background-color: pink;
            margin: auto;
        }
        .box1{
      
      
            width: 500px;
            height: 300px;
            background-color: green;
        }
        .box2{
      
      
            width: 300px;
            height: 350px;
            background-color: blue;
        }
        .box3{
      
      
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

The above is a pink parent box. If the parent does not set a height, it will be opened by the height of three child boxes by default.
Let’s take a look at a rendering:

When we add floating attributes to these child elements, the rendering looks like this:

We find that we can’t see the pink box. That’s because the browser does not add floating attributes when calculating the height of the box. The boxes are included in the calculation, so this collapse phenomenon is caused, which is very unsightly and affects the layout.

3.2 Methods to solve the problem of collapse caused by floating:

1. Add a highly commonly used element directly to the parent element
. 2. Add overflow: hidden to the parent element; causing bfc effect.

• Hide overflow. When the content exceeds its parent element, you can use this attribute and value to crop the overflow part to make the page more beautiful.
• Clear the float. When the child element floats, add overflow: hidden to the parent element. According to its first feature, the excess part of the child element should be cut off. However, because the child element is floating, it cannot be cut. All can only be cut by the parent element. The element increases its height to wrap the child element, so that the parent element has a height, and this height is an adaptive height following the child element, so that the floating child element is included in the parent element.

3. In this parent box, create a new empty div at the end, and add a clear attribute to this div. Setting clear：both；this will undoubtedly add meaningless tags. It is not good to have too many such tags on a large page. of.

clear attribute:

• Attribute value: both clears left and right floats at the same time
• left clear left float
• right clears the right float

4. Clear floats through pseudo-class::after

Using pseudo-classes to clear floats has the same effect as creating an empty div and setting it to clear: both; except that pseudo-classes are used instead of empty div elements.

• content: ''; The key to open the pseudo element must be written
• display: block; pseudo-element is an inline element that becomes a block-level attribute
• clear: both; Clear floating properties
  Full demonstration:

<style>
        div {
      
      
            /* 方法一：給父级设置一个高度 */
            /* height: 500px; */
            width: 1000px;
            background-color: pink;
            margin: auto;
            /* 方法二：在父元素里添加溢出隐藏属性overflow */
            /* overflow: hidden; */

        }

        .box1 {
      
      
            float: left;
            width: 500px;
            height: 300px;
            background-color: green;
        }

        .box2 {
      
      
            float: left;
            width: 300px;
            height: 350px;
            background-color: blue;
        }

        .box3 {
      
      
            float: right;
            width: 200px;
            height: 200px;
            background-color: red;
        }

        /* 方法三：在这个父级盒子里面，末尾专门新建一个空的div，并设置一个clear清除属性
        属性值：both 同时清除左右浮动
                left  清除左浮动
                right  清除右浮动
        */
        /* .clear{
            clear: both;
        } */


        /* 方法四;通过伪类::after清除浮动 
          /* 开启伪元素的 钥匙 key  必需写 */
        /* content: ''; */
        /* 伪元素是行内元素   变为块级属性 */
        /* display: block; */
        /* 清除浮动属性 */
        /* clear: both; */
        /* .wrap::after{
          content: '';
          display: block;
          clear: both;
        } */
    </style>
</head>

<body>
    <div class="wrap">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <!-- 专门新建一个空的div，为这个div添加一个clear清除属性 -->
        <div class="clear"></div>
    </div>
</body>

Summarize

The above is the floating layout compiled by the editor for everyone. The advantages of using floating layout when doing horizontal layout, and the common height collapse problems and solutions caused by floating layout are introduced and combined with relevant cases to give a more detailed explanation. It was compiled with reference to various sources and my own understanding. If there may be inaccuracies and omissions, I hope you guys can enlighten me and make corrections. I would like to thank you in advance.