CSS深入浅出float属性以及BFC的应用

曾经终败给现在 2022-05-27 07:42 181阅读 0赞

1.  float的特性以及float产生的影响？

*  特性:当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。  
    浮动元素碰到包含他的边框，或者浮动元素的边框会停止。浮动元素不在文档流中，会飘在文档流之上.
 *  影响一：当父元素没有设置高度时，父元素的高度塌陷

<div class="parent">
            <div class="children">
                hello
            </div>
    </div>
       <style>
            .parent {
                border: #7b007b 2px solid;
            
            }
    
            .children {
                width: 200px;
                height: 200px;
                background-color: yellow;
                float: left;
            }
       
       
        </style>

![这里写图片描述][SouthEast]

*  影响二：兄弟元素排版混乱

![这里写图片描述][SouthEast 1]  
2 . 如何清除float？

*  第一种：给浮动元素的爸爸加：`overflow：hidden;(会产生BFC）`
 *  第二种：给浮动元素的爸爸加一个伪元素：

.clearFix::after{
    	 content:'';
    	 clear:both;
    	 display:block;
     }

1.  什么是BFC？  
    \*BFC的概念：Block Formatting Context(块级格式化上下文），指页面中一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。  
    该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

*  创建BFC的四种方式：
    
    1.  float的值不为none，其他三个值（left，right，inherit）。
    2.  overflow不为visible，其他三个值（hidden scroll auto）。
    3.  position不为static或者realtive，其他三个值（fixed，absolute，inherit）。
    4.  display的值为：table-cell，table-caption，inline-block。
 *  BFC的特点：
    
    1.  计算BFC高度时，浮动元素也会参与计算(用来解决父元素高度塌陷问题）
    2.  是一个独立的容器，外面元素不会影响他里面的元素
    3.  BFC元素不会与浮动元素的盒子相互重叠（解决兄弟元素排版混乱问题）

.A{
                width: 100px;
                height: 100px;
                background-color: yellow;
                margin-bottom: 100px;
              
            }
            .B {
                width: 100px;
                height: 100px;
                margin-top: 50px;
                background-color: #7b007b;
            }
            <div class="A"></div>
    		<div class="B"></div>
    	可以发现，两个盒子之间的margin变成了100（取margin大的为最终mairgin）

![这里写图片描述][SouthEast 2]

[SouthEast]: /images/20220527/cc433817992c49a7bb4c82441e47fedb.png
[SouthEast 1]: /images/20220527/03457c06dcc7422f83e02fef4eb2e6b6.png
[SouthEast 2]: /images/20220527/979daf96e09b4a37904c1742e046df5f.png