CSS中清除外边框塌陷的4种方式

最新推荐文章于 2023-02-16 16:18:42 发布

北海冥鱼未眠

最新推荐文章于 2023-02-16 16:18:42 发布

阅读量896

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_45401910/article/details/122453239

版权

1：直接在外边框中把height属性值调大
2：在外边框的尾部加一个div标签，style设置成clear：both；
3：在外边框中加一个属性overflow：hidden。
4：使用结构伪类选择器：外边框：after，然后设置content："",
display:block;
clear:both;

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        div{
            border: 1px dashed red;
            /*第一种清除外边框塌陷的方式*/
            /*height: 500px;*/

            /*第三种解决外边框塌陷的方式*/
            /*overflow: hidden;*/
        }

        #im1{
            /*一块*/
            display: inline-block;
            float: left;
        }
        #im2{
            display: inline-block;
            /*设置浮动样式*/
            float:left;
            /*按标准网页的格式浮动，即浮动在下面一行，both表示左右都是，也可以单独设置一边
            它的这一排都没有浮动元素。它会放到浮动元素的下面一行
            */
            clear: both;
        }
        #im3{
            display: inline-block;
            float: right;

        }
        /*第四种清除外边框塌陷的方式*/
        #father:after{
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>

<body>
    <div id="father">
        <div id="im1"><img src="/video/nsn.jpg"></div>
        <div id="im2"><img src="/video/海绵宝宝.png"></div>
        <div id="im3"><audio src="/video/那就好好告个别吧.m4a" controls> </div>
        <!--第二种清除外边框塌陷的方式加一个空的div并且设置成标准文档流-->
        <!--<div style="clear: both"></div>-->
    </div>
</body>
</html>

北海冥鱼未眠

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS中清除外边框塌陷的4种方式

1：直接在外边框中把height属性值调大2：在外边框的尾部加一个div标签，style设置成clear：both；3：在外边框中加一个属性overflow：hidden。4：使用结构伪类选择器：外边框：after，然后设置content："",display:block;clear:both;代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &
复制链接

扫一扫