1.浮动属性
left 元素向左浮动
right 元素向右浮动
none 默认值,元素不浮动
浮动就是制定一个元素沿容器的左侧或右侧位置,允许文本元素和内联元素环绕它。该元素从网页的正常流动(文档流)中移除,尽管仍然保持部分的流动性
没有浮动前:
向左浮动后:
1.1 clear属性
用于清除浮动元素产生的空间,属性值包括:left(清除左浮动空间),right(清除右浮动空间),both(清除左右浮动空间)
2.解决父级边框塌陷
方法一:
在标准文档中,父级如果不指定高度,高度由子级撑开。
如果子级浮动,父级的边框就会塌陷,第一种解决的方法是,给父级一个明确的高度
方法二:在父级的最下面,添加一个不浮动得元素,并清除前面的浮动空间
方法三: 在父级元素的下面通过伪元素样式,添加一个块级元素,内容为空,清除前面的浮动空间
.box::after{
/* 内容为空 */
content: "";
/* 块元素 */
display: block;
/* 清除前面的浮动空间 */
clear: both;
}
方法四:给父元素添加overflow属性。
事实上在我们写下拉列表的场景时,这种方法的弊端就显而易见了,他会让我们的下拉列表不能显示出来。
浮动的小练习(还请大佬们多多指点)