<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>
                
    


                
  
                                            
                                                                      
        
                
          ThinkChat2.0新版上線，更智能更精彩，支持會話、畫圖、視頻、閱讀、搜索等，送10W Token，即刻開啟你的AI之旅
          廣告
        
                        
                              
  

                

                
    
                
        
                
                            ```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>site title</title>
	<style type="text/css">
		div{font-size:50px;}
		.box1{
			width: 200px;
			height: 200px;
			background-color: deeppink;
			/*float: left;*/
			
		}
	
		.box3{
			width: 200px;
			height: 200px;			
			background-color: #bfa;		}
	</style>
</head>
<body>
	<div class="box1">box1</div>
	<div class="box3">box3</div>
</body>
</html>
```
![](https://img.kancloud.cn/23/d8/23d8f5813d486561b73828b61e3afe85_1002x297.png)
.box1去掉float: left;的注釋后，
![](https://img.kancloud.cn/47/2e/472e235cd2f75ceb3e862029b90a1566_1002x183.png)


給box3新增一個子div元素
```
<div class="box3">box3<div style="height: 100px;background-color: red;"></div></div>
```
![](https://img.kancloud.cn/e0/cc/e0cc1fe553b14716aad1c07632b47871_933x287.png)
>[danger]float屬性會讓元素脫離文檔流，但是他的子元素不會


為box3添加`clear: left;`
![](https://img.kancloud.cn/23/d8/23d8f5813d486561b73828b61e3afe85_1002x297.png)
![](https://img.kancloud.cn/82/7c/827c7bd7767237af7c9fde785d261f1a_994x306.png)
>[danger]* **clear:left**的作用是元素檢測因`float: left`脫離文檔流的同輩元素的高度，然后選出一個最大的高度并賦予此元素margin-top（清除左側浮動元素對當前元素的影響）
>* **clear:right**的作用是元素檢測因`float: right`脫離文檔流的同輩元素的高度，然后選出一個最大的高度并賦予此元素margin-top（清除右側浮動元素對當前元素的影響）
>* **clear:both**的作用是元素檢測因`float`脫離文檔流的同輩元素的高度，然后選出一個最大的高度并賦予此元素margin-top（清除浮動元素對當前元素的影響）
此時手動設置此元素的margin-top是無效的，margin-left、margin-right、margin-bottom可用

**新增div2代碼如下：**
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>site title</title>
	<style type="text/css">
		div{font-size:50px;}
		.box1{
			width: 200px;
			height: 200px;
			background-color: deeppink;
			/* float: left; */
			
		}
		.box2{
			width: 400px;
			height: 400px;			
			background-color: #fba;
			/*float: right;*/
		}	
		.box3{
			width: 200px;
			height: 200px;			
			background-color: #bfa;		
		}
	</style>
</head>
<body>
	<div class="box1">box1</div>
	<div class="box2">box2</div>
	<div class="box3">box3</div>
</body>
</html>
```
![](https://img.kancloud.cn/5f/14/5f14a85688e42e42662f1790025b152d_997x530.png)
去掉box1的` float: left;`注釋和box2的`float: right;`注釋
![](https://img.kancloud.cn/62/a0/62a074903da21d427d03a998ee6e5e65_1005x273.png)
給box3加上`clear: left;`
![](https://img.kancloud.cn/bc/48/bc48ce301ad1820162973991ea71142a_1005x267.png)
給box3加上`clear: right;`
![](https://img.kancloud.cn/62/58/625866e1250da1634a620f6a9912203e_1004x411.png)
給box3加上`clear: both;`
![](https://img.kancloud.cn/62/58/625866e1250da1634a620f6a9912203e_1004x411.png)



例子補充：
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>site title</title>
	<style type="text/css">
		div{font-size:50px;}
		.box1{
			width: 200px;
			height: 200px;
			background-color: deeppink;
			 float: left; 
			
		}
		.box4{
			width: 300px;
			height: 300px;
			background-color: blue;
			 float: left; 
			
		}		
		.box2{
			width: 400px;
			height: 400px;			
			background-color: #fba;
			float: right;
		}	
		.box3{
			width: 200px;
			height: 200px;			
			background-color: #bfa;		
			clear: left; 
		}
	</style>
</head>
<body>
	<div class="box1">box1</div>
	<div class="box4">box4</div>
	<div class="box2">box2</div>
	<div class="box3">box3</div>
</body>
</html>
```
![](https://img.kancloud.cn/4e/38/4e38c3f01338f9213a4537687406d7a4_1005x368.png)
                    
                
        
                
            
        
                
    
                
    
                
        
                
    
                

                







                  <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>
                              

哎呀哎呀视频在线观看