css clearl属性

在学习CSS布局时，我们经常会遇到一个问题：子元素浮动后，父元素的高度不会自适应，导致布局上出现问题。这时，我们就需要用到CSS的clear属性。

clear属性用于指定元素的哪一侧不允许出现浮动元素。通常，我们将它应用于父元素来保证其能够自适应子元素的高度。

clear属性有四个可选值：

.clearfix::after{
  content:"";
  display:table;
  clear:both;
}

1. clear: none

默认值。不清除任何浮动元素，父元素高度不会自适应。

2. clear: left

在元素左侧不允许出现左浮动元素。

3. clear: right

在元素右侧不允许出现右浮动元素。

4. clear: both

在元素两侧不允许出现任何浮动元素。

除了使用clear属性，还有一种更常用的解决方法是使用clearfix技巧。我们可以在父元素中添加一个:before或:after伪元素，并设置content属性为“”，display属性为table，然后将clear属性设置为both。

.clearfix::after{
  content:"";
  display:table;
  clear:both;
}

这样就能够清除浮动，使父元素自适应高度了。

总之，CSS的clear属性非常重要，在布局时需要灵活运用。