-
浮动元素产生了浮动流
块元素看不到浮动流的元素,即块元素会和浮动元素重叠(这也是父元素包裹不了浮动子元素的原因)
BFC元素、inline属性元素,及文本能看到浮动元素,可以正常排列
-
父元素包括浮动子元素
利用伪元素
- 什么是伪元素?
一个标签自产生时就带有了两个伪元素 ::before ::after 比如新建了一个span,这两个伪元素所在位置如下
<span>::before123::after</span>
伪类可以通过css选择器选择出来,span::before{content:""} content里面写内容,伪元素初始为inline元素,可以像普通元素一样操作
- 利用伪元素?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
*{
margin: 0;
padding: 0;
}
.red{
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.green{
float: left;
width: 100px;
height: 100px;
background-color: green;
}
.wrapper::after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="red"></div>
<div class="green"></div>
</div>
</body>
</html>
父元素设定:
.wrapper::after{
content: "";
display: block;
clear: both;
}
此时子元素高度可以撑起父元素,相当于在父元素最后加一个不是float的子元素。因为clear:both只对块级元素才生效,所以必须加上display:block。
-
触发父级BFC
设置父级元素 为position:absolute 或者 float: left/right 或者 display: inline-block,父元素宽高均会包裹子元素,因为系统内部会将子元素变为inline-block,因此父元素宽由行间元素内容决定。
设置父级元素 为overflow:hidden, 父元素高会包裹子元素。