HTML之父级边框塌陷问题

最新推荐文章于 2023-04-22 03:07:57 发布

我怎么什么都不会啊

最新推荐文章于 2023-04-22 03:07:57 发布

阅读量225

点赞数

分类专栏： HTML 文章标签： css html html5

本文链接：https://blog.csdn.net/qq_45678953/article/details/117039821

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML之父级边框塌陷问题

HTML代码

<head>
    <style>
        .box{
            border: 2px solid wheat;
            background-color: wheat;
        }
        .d1{
            border: 2px solid aquamarine;
            background-color: aquamarine;
            width: 200px;
            height: 200px;
            float: left;
        }
        .d2{
            border: 2px solid sienna;
            background-color: sienna;
            width: 200px;
            height: 200px;
            float: left;
        }
        .d3{
            border: 2px solid darkorchid;
            background-color: darkorchid;
            width: 200px;
            height: 200px;
            float: right;
        }
        .d4{
            border: 2px solid palegreen;
            background-color: palegreen;
            width: 200px;
            height: 200px;
            float: right;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="d1">盒子1</div>
        <div class="d2">盒子2</div>
        <div class="d3">盒子3</div>
        <div class="d4">盒子4</div>
    </div>
</body>

解决方法一

给父级元素设置高度和宽度属性值

        .box{
            border: 2px solid black;
            background-color: wheat;
            width: 1200px;
            height: 300px;
        }

解决方法二

在父级元素的最后增加一个空的div, 并且清除浮动

<div class="d5"></div>
.d5{
    clear: both;
}

解决方法三

给父级元素添加一个overflow属性

overflow: hidden

解决方法四

给父类添加一个伪类

.box:after{
    content: "";
    display: block;
    clear: both;
}

我怎么什么都不会啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML之父级边框塌陷问题

HTML之父级边框塌陷问题HTML代码<head> <style> .box{ border: 2px solid wheat; background-color: wheat; } .d1{ border: 2px solid aquamarine; background-color: aquamarine; .
复制链接

扫一扫

专栏目录