前端入门-day3（css中的float和clearfloat）

时间：2023-03-30 13:58:00 CSS

写在前面float是css中比较麻烦的一个属性，通常伴随着clearfloat。今天让我们一起漂流吧。常见用法其实当我们将一个元素设置为浮动时，实现的效果如下图所示：这种布局相信大家都见过，很多杂志都会用到这种左右插图和文字环绕效果。浮动的另一种常见用法如下图所示：即让某一部分在某行右对齐，通常不使用margin实现，而是使用浮动实现。浮动引起的问题浮动元素无法展开父元素，导致高度塌陷！！看看下面的例子：

.container{background-color：浅蓝色;font-size:0;}.son1{display:inline-block;宽度：50px；高度：50px；背景色：橙色；}.son2{宽度：100px；高度：100px；:lightgray;}当较大的盒子浮动时，我们可以看到它无法展开父元素。通常这不是我们想要的，因为它会打乱布局。尤其是当父元素中的子元素都是浮动的时候尤为明显，父元素的高度会塌陷为0。清除浮动因此，当我们使用浮动又不想出现这种情况时，我们需要清除浮动。清除浮动的方法可能有很多，但现在比较流行。我个人最喜欢的方法如下：首先，添加以下CSS：.clearfix:after{content:'.';显示：块；高度：0；可见性：隐藏；clear:both;}然后在父容器中添加clearfix类，最终代码如下：