clear · 前端 · 看云

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)