包裹浮动元素
<style>
.wrapper{
border: 1px solid black;
}
.content{
width:100px;
height: 100px;
background-color: black;
color: #fff;
float: left;
}
</style>
<body>
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
</body>
疑问:为什么wrapper没有包裹content,而是一条直线?
因为块级元素看不到浮动元素,所以wrapper里没有内容。
而直接给wrapper确定高度的话,那如果有很多个content,那就超出了,还是没包住。
那怎么包裹呢?
1.下面用p标签来个边框包一下
<style>
.wrapper{
border: 1px solid black;
}
.content{
width:100px;
height: 100px;
background-color: black;
color: #fff;
float: left;
}
p{
border: 1px solid black;
clear: both;
}
</style>
<body>
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
<p></p>
</body>
不管有多少个content,都能包住
但这样改变了html的结构,解决一个问题不能在结构上乱修改。所以上面方法不用。
最好的方法是使用伪元素。
2.利用伪元素
<style>
.wrapper{
border: 1px solid black;
}
.content{
width:100px;
height: 100px;
background-color: black;
color: #fff;
float: left;
}
/*在元素之后添加内容*/
.wrapper::after{
content: ''; /*content属性必须写上*/
display: block; /*块级元素才能使用clear属性*/
clear: both;
}
</style>
<body>
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
</body>
3.反向思维
为什么wrapper包不住content呢?
因为块级元素看不到浮动元素,那么怎样让wrapper能看到浮动元素呢。
学过float属性,我们知道:所有产生浮动流的元素,块级元素看不到它们,产生bfc的元素 和文本类属性的元素(inline或inline-block)以及文本都能看到浮动元素。
比如:
.wrapper{
border: 1px solid black;
position: absolute;
}
但会带来相应的后果。