MDN之Web 开发技术【clear属性】

忘是亡心i 2021-07-04 17:25 347阅读 0赞

`clear` CSS 属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。`clear` 属性适用于浮动和非浮动元素。  
![在这里插入图片描述][20190829092228485.png]  
![在这里插入图片描述][20190829093317608.png]  
![在这里插入图片描述][20190829093346199.png]  
![在这里插入图片描述][20190829093428678.png]  
当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。这个非浮动块的垂直外边距会折叠。

另一方面，两个浮动元素的垂直外边距将不会折叠。当应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边框边界的下方。这会影响后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素。

要被清除的相关浮动元素指的是在相同**块级格式化上下文**中的前置浮动。

> 注意：如果一个元素里只有浮动元素，那它的高度会是`0`。如果你想要它自适应即包含所有浮动元素，那你需要清除它的子元素。一种方法叫做`clearfix`，即`clear`一个不浮动的 `::after` 伪元素。

#container::after {  
      content: "";
      display: block; 
      clear: both;
    }

## 语法 ##

/* Keyword values */
    clear: none;
    clear: left;
    clear: right;
    clear: both;
    clear: inline-start;
    clear: inline-end;
    
    /* Global values */
    clear: inherit;
    clear: initial;
    clear: unset;

### 值 ###

**`none`**  
元素不会向下移动清除之前的浮动。  
**`left`**  
元素被向下移动用于清除之前的左浮动。  
**`right`**  
元素被向下移动用于清除之前的右浮动。  
**`both`**  
元素被向下移动用于清除之前的左右浮动。  
**`inline-start`**  
该关键字表示该元素向下移动以清除其包含块的起始侧上的浮动。即在某个区域的左侧浮动或右侧浮动。  
**`inline-end`**  
该关键字表示该元素向下移动以清除其包含块的末端的浮点，即在某个区域的右侧浮动或左侧浮动。

### Formal syntax ###

## 示例 ##

### `clear: left` ###

HTML

<div class="wrapper">
      <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
      <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
      <p class="left">This paragraph clears left.</p>
    </div>

CSS

.wrapper{ 
      border:1px solid black;
      padding:10px;
    }
    .left { 
      border: 1px solid black;
      clear: left;
    }
    .black { 
      float: left;
      margin: 0;
      background-color: black;
      color: #fff;
      width: 20%;
    }
    .red { 
      float: left;
      margin: 0;
      background-color: pink;
      width:20%;
    }
    p { 
      width: 50%;
    }

在 CodePen 中打开 在 JSFiddle 中打开  
![在这里插入图片描述][20190829213338619.png]

### `clear: right` ###

HTML

CSS

.wrapper{ 
      border:1px solid black;
      padding:10px;
    }
    .right { 
      border: 1px solid black;
      clear: right;
    }
    .black { 
      float: right;
      margin: 0;
      background-color: black;
      color: #fff;
      width:20%;
    }
    .red { 
      float: right;
      margin: 0;
      background-color: pink;
      width:20%;
    }
    p { 
      width: 50%;
    }

在 CodePen 中打开 在 JSFiddle 中打开  
![在这里插入图片描述][20190829214157821.png]

### `clear: both` ###

HTML

<div class="wrapper">
      <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p>
      <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
      <p class="both">This paragraph clears both.</p>
    </div>

CSS

.wrapper{ 
      border:1px solid black;
      padding:10px;
    }
    .both { 
      border: 1px solid black;
      clear: both;
    }
    .black { 
      float: left;
      margin: 0;
      background-color: black;
      color: #fff;
      width:20%;
    }
    .red { 
      float: right;
      margin: 0;
      background-color: pink;
      width:20%;
    }
    p { 
      width: 45%;
    }

![在这里插入图片描述][2019082921551084.png]

[20190829092228485.png]: /images/20210704/9ad1a3e7486446738541f67621f13f09.png
[20190829093317608.png]: /images/20210704/ab5b846f18004d29a64484d52ca97eb9.png
[20190829093346199.png]: /images/20210704/c04998e019a0431da9bee41a59d8192a.png
[20190829093428678.png]: /images/20210704/fa5ca58dd620422983ec7e0e00357d7e.png
[20190829213338619.png]: /images/20210704/2e9c62d2ed844a5c90947e7e6c608b77.png
[20190829214157821.png]: /images/20210704/f5b3d826c57e490a97df3236f6aa83ef.png
[2019082921551084.png]: /images/20210704/451ddd71afb54772a132e261b930f550.png