<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>
          

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>
          

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>
          

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>
                <ruby id="bdb3f"></ruby>
                
    


                
  
                                            
                            
        
                
          ??碼云GVP開源項目 12k star Uniapp+ElementUI 功能強大 支持多語言、二開方便！
          廣告
        
                        
                                                                        
  

                

                
    
                
        
                
                            ```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>site title</title>
	<style type="text/css">
		.outer{
			border:10px solid red;
		}
		.inner{
			width: 100px;
			height: 100px;
			background-color: #bfa;
			float: left;
		}
		.box1{
			background-color: deeppink;
		}
		.box2{
			background-color: pink;
		}		
	</style>
</head>
<body>
	<div class="outer">
		<div class="inner box1">
		</div>
		<div class="inner box2">
		</div>		
	</div>	
	<div style="width: 200px;height:200px;background-color: blue;"></div>
</body>
</html>
```
如果父元素不寫死高度必然會出現高度塌陷（因為 子元素開啟浮動后，會脫離文檔流）
![](https://img.kancloud.cn/f2/64/f26471d543d98218fc3787b4e539d9fb_1263x238.png)
**BFC(Block Formatting Context)塊級格式化環境**
* BFC是一個css中的一個隱含的屬性,可以為一個元素開啟BFC
* 開啟BFC該元素會變成一個獨立的布局區域


##
## **可以通過一些特殊方式來開啟元素的BFC(body自帶BFC)**
* 1、設置元素的浮動.outer和.inner都加上float:left(不推薦,由于inline-block有難以處理的白邊且父元素寬度也沒了)
![](https://img.kancloud.cn/dd/11/dd11aebd8bc188b29aba55d0b454f764_1244x189.png)
* 2、給父元素outer加上display:inline-block（不推薦,）
![](https://img.kancloud.cn/77/19/77190903621d9a1f073d20d6060bff93_1211x310.png)
* 3、將元素的overflow的值設置成一個非visible的值一般是overflow:hidden（overflow:auto也可以但是有滾動條）
其他開啟的BFC的方式參見BFC章節
![](https://img.kancloud.cn/ee/fe/eefef626d8eadca7a2799aa9169981e1_1051x342.png)

例1：
~~~
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>site title</title>
	<style type="text/css">
		.outer{
			border:10px solid red;
			overflow: hidden;
		}
		.inner{
			width: 100px;
			height: 100px;
			background-color: #bfa;
			float: left;
		}
		.box1{
			background-color: deeppink;
		}
		.box2{
			background-color: pink;
		}		
	</style>
</head>
<body>
	<div class="outer">
		<div class="inner box1">
		</div>
		<div class="inner box2">
		</div>		
	</div>	
	<div style="width: 200px;height:200px;background-color: blue;"></div>
</body>
</html>
~~~
![](https://img.kancloud.cn/fe/b7/feb76ccc0ebf03d37f24dcb0d26980c0_1262x330.png)
##
## **元素開啟BFC后的特點**
* 1、開啟BFC的元素不會被浮動元素所覆蓋

當給box1添加浮動時box2被box1覆蓋
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>site title</title>
	<style type="text/css">
		.box1{
			width: 200px;
			height: 200px;
			background-color: deeppink;
			float: left;
		}
		.box2{
			width: 200px;
			height: 200px;			
			background-color: #fba;
		}	
	</style>
</head>
<body>
	<div class="inner box1">
	</div>
	<div class="inner box2">
	</div>		
</body>
</html>
```
可以看到box1浮在了box2上面，導致box2看不見
![](https://img.kancloud.cn/18/03/18030532a37f216585988f29ca2b5179_327x257.png)
然后給box2加上overflow:hidden
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>site title</title>
	<style type="text/css">
		.box1{
			width: 200px;
			height: 200px;
			background-color: deeppink;
			float: left;
		}
		.box2{
			width: 200px;
			height: 200px;			
			background-color: #fba;
			overflow: hidden;
		}	
	</style>
</head>
<body>
	<div class="box1">
	</div>
	<div class="box2">
	</div>		
</body>
</html>
```
給box開啟了BFC，浮動元素就不能浮在上面啦
![](https://img.kancloud.cn/f2/3e/f23e2a7786a7bce238adf3e3ad969ae0_1257x222.png)

* 2、開啟BFC的元素子元素和父元素外邊距不會重疊
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>site title</title>
	<style type="text/css">
		.box1{
			width: 200px;
			height: 200px;
			background-color: deeppink;
		}

		.box3{
			width: 100px;
			height: 100px;			
			background-color: blue;
			margin-top: 100px;
		}
	</style>
</head>
<body>
	<div class="box1">
		<div class="box3"></div>
	</div>
</body>
</html>
```
發現不是box3往下走，而是父元素box1往下走100px，
因為父類容器沒有border和padding的時候父元素box1和子元素box3的外邊距發生重疊，子元素的外邊距傳遞給了父元素的（當然我們可以給父元素border和padding但是不是完美的解決方案）
![](https://img.kancloud.cn/5f/f0/5ff0266d5994f446fdf87f0adb0bba9b_1263x306.png)
我們再給box1啟用BFC`overflow:hidden`
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>site title</title>
	<style type="text/css">
		.box1{
			width: 200px;
			height: 200px;
			background-color: deeppink;
			overflow: hidden;
		}
		.box3{
			width: 100px;
			height: 100px;			
			background-color: blue;
			margin-top: 100px;
		}
	</style>
</head>
<body>
	<div class="box1">
		<div class="box3"></div>
	</div>
</body>
</html>
```
![](https://img.kancloud.cn/d7/40/d74043f2aeabf810e2d6e89373e93ed3_1250x233.png)


* 3、開啟BFC的元素可以包含浮動的子元素（可以將浮動元素包裹起來而不塌陷）
參考例1

                    
                
        
                
            
        
                
    
                
    
                
        
                
    
                

                







                  <ruby id="bdb3f"></ruby>
                  <p id="bdb3f"><cite id="bdb3f"></cite></p>
                    

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>
                        

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>
                        

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>
                        

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>
                              <ruby id="bdb3f"></ruby>
                              

哎呀哎呀视频在线观看