float及float浮动坍塌问题

鸡腿子-麦麦呀！

于 2022-10-18 12:08:26 发布

阅读量173

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_64923859/article/details/127385856

版权

本文介绍了CSS中的float属性，包括left和right两个基本属性，用于实现元素的左右对齐和文字环绕图片效果。同时，讨论了浮动元素导致的父元素高度坍塌问题，提出了四种解决方法：使用clear属性的空元素、CSS的overflow属性、给浮动元素的容器添加浮动以及使用CSS的:after伪元素。这些知识对于理解和优化页面布局至关重要。

摘要由CSDN通过智能技术生成

float —— 中文意思浮动，当然就有往左浮动，往右浮动。这就是 float 的两个最基本的属性:

left
right

在这里，我们分别设置两个图标的 CSS 如下：

.logo {
  float: left;
}

.avatar {
  float: right;
}

在什么时候需要使用 float 呢？主要使用场景有两种：

如果我们想要一组元素同时靠左靠右对齐，可以使用 float，正如上面案例一样
如果我们想要文字围绕图片，可以使用 float，这个大家先了解下，后面用到，我们会具体讲到。

浮动坍塌

如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候，那么它的高度就会踏缩为零。这是因为浮动元素脱离了文档流，包围它们的父块中没有内容了，所以“”塌陷“”了。

方法一：使用带clear属性的空元素鉴第47个知识点

方法二：使用CSS的overflow属性

方法三：给浮动元素的容器添加浮动

方法四：使用CSS的:after伪元素