包裹浮动元素

最新推荐文章于 2020-12-24 00:53:53 发布

zmj2051176726

最新推荐文章于 2020-12-24 00:53:53 发布

阅读量216

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/xiaoxingxingzai/article/details/102694030

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

包裹浮动元素

<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的元素&nbsp和文本类属性的元素（inline或inline-block）以及文本都能看到浮动元素。
比如：

 .wrapper{
        border: 1px solid black;
        position: absolute;
    }

但会带来相应的后果。

zmj2051176726

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
包裹浮动元素

包裹浮动元素<style> .wrapper{ border: 1px solid black; } .content{ width:100px; height: 100px; background-color: black; color: #fff; float:...
复制链接

扫一扫

专栏目录