观察：CSS布局中为什么会出现浮动？怎么清除浮动？

(资料图片)

浮动是一种不同于固定和稳定定位的定位方式，它将元素排除在标准流之外，即元素将脱离标准流，不占据空间。

1.父元素高度不够：如果元素被浮动，那么它将脱离标准流并占据额外的空间，导致父元素的高度变得更低。这可能会影响与浮动元素同级的其他元素的排列和布局。

2.影响页面布局：当浮动元素与其他元素交错时，可能会出现混乱的布局。为了解决这个问题，可以使用清除浮动的方法来清除浮动，使得元素可以按照正确的顺序排列。

1、子元素浮动后，不占位置，父元素的高度无法被撑开，影响与父元素同级的元素；2、与浮动元素同级的非浮动元素（内联元素）会跟随其后；3、若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构解决方法

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

可以在父元素后面添加一个空的clearfix标签，并设置clear：both；属性来清除浮动。这个标签必须是块元素，并且它后面的所有内容都应该是清除浮动的内容。

.clearfix:after {    content: "";    display: table;    clear: both;  }  .clearfix {    float: left; /\* 或者float: right \*/  }

在这个示例中，我们使用了伪类选择器 clear：both；来清除浮动，同时使用了 float：left；来将元素向左浮动。这个方法可以根据需要自由地设置元素的浮动方向。

3.添加如下样式，给父元素添加 clearfix 样式：

.clearfix:after {content: "."; display: block;height: 0; clear: both; visibility: hidden; }/* for IE */.clearfix{ *zoom:1; }

4.给父级元素设置 overflow：hidden；或 overflow：auto；本质是构建一个 BFC

关键词：