Web Full Stack Engineer's Road (2)-CSS (6)-Layout-High Collapse and BFC

Learn more about BFC: https://www.cnblogs.com/hoboStage/p/5679349.html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3初识(六)布局——高度塌陷与BFC</title>
    <style>
        .outer{
            border: 10px solid red;
            /*BFC使用*/
            /*float: left;*/
            /*display: inline-block;*/
            overflow: auto;
        }
        .inner{
            height: 100px;
            width: 100px;
            background-color: #bbffaa;
            float: left; /*高度塌陷*/
        }
        .box1,.box2,.box4{
            width: 100px;
            height: 100px;
        }
        .box1{
            background-color: #bbffaa;
            float: left;
        }
        .box2{
            background-color: greenyellow;
            /*BFC的使用*/
            overflow: hidden;
        }
        .box3{
            width: 150px;
            height: 150px;
            background-color: orange;
            /*BFC的使用*/
            overflow: hidden;
        }
        .box4{
            background-color: blueviolet;
            margin-top:50px ; 
        } 
        / * The 
            problem of height collapse: 
                In the floating layout, the height of the parent element is extended by the child element by default. 
                When the child element floats, it will completely leave the document flow, and the child element will be detached from the document flow. Supporting the height 

                of the parent element causes the height of the parent element to be lost. After the height of the parent element is lost, the elements below it will automatically move up, causing the layout of the page to be chaotic. 

                Height collapse is a common problem in floating layouts. We have to deal with it! 

            BFC (Block Formatting Context) block-level formatting environment 
                BFC is an implied attribute in a CSS. You can turn on BFC for an element. Turn 
                on BFC. This element will become an independent layout area 
                element. Turn on BFC Features: 
                    1. BFC-enabled elements will not be covered by floating elements. 
                    2. BFC-enabled elements. The margins of child elements and parent elements will not overlap (will not be recognized together, 
                    such as setting margin-top for child elements, found moved along with the parent element of the phenomenon), BFC to open in the parent element at the 
                    3, open the BFC element may contain floating Element

                There are some special ways to open the BFC of the element: 
                    1. Set the element to float (the attribute value is not none) (not recommended) 
                    2. Set the element to an inline block element (not recommended) 
                    3. Set the element's overflow to a non The value of visible 
                    ... 
                    common way: set overflow: hidden / auto for the element to turn on its BFC so that it can contain floating elements 



         * / 
    </ style > 
</ head > 
< body > 
    < div class = "outer" > 
        < div class = "inner" > </ div > 
    </ div > 
    <!-After the   height collapses, the position of the lower div is affected-   > 
    <div style="width: 150px;height: 150px;background-color: yellow"></div>

    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3">
        <div class="box4"></div>
    </div>
</body>
</html>
The effect of the code after using BFC:
Web Full Stack Engineer's Road (2)-CSS (6)-Layout-High Collapse and BFC

Guess you like
