[分享]css中clear属性的作用

在CSS中，"clear"属性常用于控制浮动元素的布局方式。通常情况下，当一个元素被设为浮动（float）后，周围的元素会自动围绕着它排列，形成一个环绕的效果。但有时候我们需要在某...

在CSS中，"clear"属性常用于控制浮动元素的布局方式。通常情况下，当一个元素被设为浮动（float）后，周围的元素会自动围绕着它排列，形成一个环绕的效果。但有时候我们需要在某些元素的后面清除浮动效果，让这些元素显示在浮动元素的下方，避免影响整个布局。这时候就需要使用"clear"属性了。

"clear"属性可以取下面几种值：
1. "none" 不清除浮动效果。
2. "left" 清除所有左浮动元素。
3. "right" 清除所有右浮动元素。
4. "both" 清除所有左、右浮动元素。
5. "initial" 将属性设置为默认值。
6. "inherit" 继承父元素的属性值。

例如，下面的代码演示了如何在浮动元素后面添加一个清除浮动的元素。

 .container{
    width: 500px;
    overflow: auto; /* 让包含元素自动适应高度 */
  }
  
  .left{
    float: left;
    width: 200px;
    height: 200px;
    background-color: blue;
  }
  
  .right{
    float: right;
    width: 200px;
    height: 100px;
    background-color: red;
  }
  
  .clear{
    clear: both;
  } 

在这个例子中，我们创建了两个浮动的元素，一个是左浮动的蓝色方块，一个是右浮动的红色方块。如果我们不加上清除浮动的元素，那么这两个元素会重叠在一起。因为它们浮动在页面左右两侧，没有办法自动地换行。但是如果我们在它们下面添加一个元素除去浮动的影响，那么这个元素将会出现在这两个方块底部，从而避免了布局混乱的问题。