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

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>

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

 <style>
        .parent {
            width: 100%;
            height: 200px;
        }

        .right {
            float: right;
            background: #00b3ee;
            height: 150px;
            width: 300px;
        }

        .left {
            height: 150px;
            float: left;
            background: #eee789;
            width: 300px;
        }

        .center {
            height: inherit;
            background: #7b007b;
        }

    </style>
    <div class="parent ">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            这是浮动布局中间部分这是浮动布局中间部分这是浮动布局中间部分 <br>
            这是浮动布局中间部分这是浮动布局中间部分这是浮动布局中间部分 <br>
            这是浮动布局中间部分这是浮动布局中间部分这是浮动布局中间部分 <br>
            这是浮动布局中间部分这是浮动布局中间部分这是浮动布局中间部分 <br>
            这是浮动布局中间部分这是浮动布局中间部分这是浮动布局中间部分 <br>
            这是浮动布局中间部分这是浮动布局中间部分这是浮动布局中间部分 <br>
            这是浮动布局中间部分这是浮动布局中间部分这是浮动布局中间部分 <br>
            这是浮动布局中间部分这是浮动布局中间部分这是浮动布局中间部分 <br>
            这是浮动布局中间部分这是浮动布局中间部分这是浮动布局中间部分 <br>
        </div>
    </div>

2 . 如何清除float？

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

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

3. 什么是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）