当前位置：网站首页>Height collapse and BFC

Height collapse and BFC

2022-07-27 13:21:00 【Sorry, this person doesn't exist】

High collapse and BFC

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> .outer{
      border: 10px red solid; overflow: hidden; } .inner{
      width: 100px; height: 100px; background-color: #bbffaa; /*  The problem of high collapse ：  In a floating layout , By default, the height of the parent element is held open by the quilt element   When the child element floats , It's completely detached from the document stream , The child element is detached from the document stream   Will not be able to support 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 move up automatically , It leads to page layout confusion   So height collapse is a common problem in floating layout , We have to deal with this problem  */ float: left; } </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>

    </div>
</body>
</html>

           BFC（Block Formatting Context） Block level formatting environment 
               -BFC It's a css An implicit attribute in , It can be turned on for an element BFC
                  Turn on BFC Calcium will become an independent layout area 
                - Element on BFC The characteristics of the post war era ：
                    1、 Turn on BFC Is not overwritten by floating elements 
                    2、 Turn on BFC The outer margins of the child element and the parent element of the element do not overlap 
                    3、 Turn on BFC Can contain floating child elements 

                - There are some special ways to turn on elements BFC：
                    1、 Set element float （ Not recommended ）
                    2、 Set the element as an inline block element （ Not recommended ）
                    3、 Elemental overflow Set to a non visible Value 
                         - Common ways ：  Set... For the element overflow：hidden Turn on its BFC  So that it can contain floating elements
原网站

版权声明
本文为[Sorry, this person doesn't exist]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/208/202207271110149976.html

边栏推荐

猜你喜欢

随机推荐