float —— 中文意思 浮动,当然就有往左浮动,往右浮动。这就是 float 的两个最基本的属性:
-
left
-
right
在这里,我们分别设置两个图标的 CSS 如下:
.logo { float: left; } .avatar { float: right; }
在什么时候需要使用 float 呢?主要使用场景有两种:
-
如果我们想要一组元素同时靠左靠右对齐,可以使用 float,正如上面案例一样
-
如果我们想要文字围绕图片,可以使用 float,这个大家先了解下,后面用到,我们会具体讲到。
浮动坍塌
如果父元素只包含浮动元素,且父元素未设置高度和宽度的时候,那么它的高度就会踏缩为零。这是因为浮动元素脱离了文档流,包围它们的父块中没有内容了,所以“”塌陷“”了。
方法一:使用带clear属性的空元素 鉴第47个知识点
方法二:使用CSS的overflow属性
方法三:给浮动元素的容器添加浮动
方法四:使用CSS的:after伪元素