子Div脱离文档流后怎么撑开父Div

最新推荐文章于 2023-12-10 18:05:48 发布

圣诞老人村的来信

最新推荐文章于 2023-12-10 18:05:48 发布

阅读量4.6k

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/Corazhang/article/details/77906021

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

以下几种方法在不重复使用的情况下实验的

1. 给父元素设置宽高
2. 添加after伪类.clearfix

   .clearfix::after{
       content:'';
       display:block;
       clear:both;
   }

3.   给父元素设置padding也可以，但是会影响子元素的位置

4.   给父元素设置 overflow:hidden 或者 auto;

5.   因为浮动而脱离文档流的情况下，在父容器的底部加一个额外的标签，令其清除浮动，兼容性好
<div style="clear:both;"></div> 或者<br style="clear:both;" />

6.只给父元素加display:table;这种方法对float情况有用，对因定位而脱离文档流没有用；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #div1{
            background-color: yellow;
            /*display: table;*/          
            position: relative;
        }
        #div2{
            width: 200px;
            height: 200px;
            background-color: coral;
            margin: 100px;
        }
        #div3{
            width: 200px;
            height: 200px;
            background-color: greenyellow;  
        }
    </style>
</head>
<body>
<div id="div1">
    <div id="div2"></div>
    <div id="div3"></div>
</div>

</body>
</html>

 此时，div2有margin，效果如图

这里写图片描述

加上display:table后，效果如图（为什么呢？？是因为相当于一个表格，所以默认的从左上角开始？）

这里写图片描述

以上两种情况父div的宽度也不同
不脱离文档流的情况下，当把两个子div都加上display:table-cell;之后，如图

这里写图片描述

浮动的情况下，再设置table-cell效果，也是没有用的，下图；  定位的时候table-cell也是没有效果

这里写图片描述

     想一想，查一查基本就这几种情况，以后练习发现问题再来更新。

圣诞老人村的来信

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
子Div脱离文档流后怎么撑开父Div

子Div脱离文档流后怎么撑开父Div
复制链接

扫一扫

专栏目录