CSS浮动
- 浮动元素产生了浮动流
- 所有产生了浮动流的元素,块级元素看不到他们
- 产生了bfc的元素和文本类属性的元素(inline)以及文本都能看到浮动元素
- 伪元素清除浮动
.wrapper::after{
content:"";
display: block;
clear: both;
}
- 凡是设置了position:abolute; float:left/right;
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
</div>123
*{
margin: 0;
padding: 0;
}
.wrapper{
border: 1px solid black;
}
.content{
float: left;
width: 100px;
height: 100px;
color: #fff;
background-color: black;
}
.wrapper::after{
content:"";
display: block;
clear: both;
}
.box{
float: left;
width: 100px;
height: 100px;
background-color: black;
opacity: 0.5;
}
.demo{
width: 150px;
height: 150px;
background-color: green;
}