CSS------浮动（display、float）、父级边框塌陷

最新推荐文章于 2023-12-13 11:44:58 发布

没有阳光，也一样灿烂

最新推荐文章于 2023-12-13 11:44:58 发布

阅读量160

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/insist_to_learn/article/details/113139810

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

5、浮动

块级元素：独占一行如：h1-h6 p div 列表…
行内元素：不独占一行如：span a img strong…
行内元素可以被包含在块级元素中，反之则不可以

5.1、display

实现行内元素排列的一种方式，但更多的是用float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 2px solid red;
        }
        span{
            width: 100px;
            height: 100px;
            border: 2px solid red;
            /*display: block;
            以块级元素展示的时候不会被包含
            */
            
        }
    </style>
</head>
<body>
<div>div块级元素</div>
<span>span行内元素</span>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    display: block 块级元素
                 inline 行内元素
                 inline-block 是块元素，但可以内联，在一行-->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 2px solid red;
            display: none;
        }
        span{
            width: 100px;
            height: 100px;
            border: 2px solid red;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>div块级元素</div>
<span>span行内元素</span>
</body>
</html>

5.2、float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../float.css" type="text/css">
</head>
<body>
<div id="father">
    <div class="layer1">
        <img src="../picture/斯嘉丽.jpg" height="313" width="500"/>
    </div>
    <div class="layer2">
        <img src="../picture/气球.jpg" height="333" width="200"/>
    </div>
    <div class="layer3">
        <img src="../picture/舞者.jpg" height="375" width="300"/>
    </div>
    <div class="layer4">
        风急天高猿啸哀，渚清沙白鸟飞回；无边落木萧萧下，不尽长江滚滚来。
    </div>
</div>

</body>
</html>

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px solid #CE4A50;
}
.layer1{
    border: 1px solid #CE4A50;
    display: inline-block;
    float: right;
}
.layer2{
    border: 1px solid #CE4A50;
    display: inline-block;
    float: right;
}
.layer3{
    border: 1px solid #CE4A50;
    display: inline-block;
    float: right;
}
.layer4{
    border: 1px solid #CE4A50;
    line-height: 23px;
    font:oblique bolder 12px 楷体;
    display: inline-block;
    float: right;
}

5.3、父级边框塌陷

clear

/*clear:right  右侧不允许有浮动元素
/*clear:left   左侧不允许有浮动元素
/*clear:both   两侧不允许有浮动元素
*/
.layer4{
    border: 1px solid #CE4A50;
    line-height: 23px;
    font:oblique bolder 12px 楷体;
    display: inline-block;
    float: right;
    clear: right;
}

解决方案

1、增加父级元素的高度：不推荐

#father{
    border: 1px solid #CE4A50;
    height: 800px;
}

2、增加一个空的div标签，解除浮动

<div class="clear"></div>

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

3、overflow ：在父级元素中增加一个overflow：hidden

#father{
    border: 1px solid #CE4A50;
    overflow: hidden;
}

4、在父类中添加一个伪类：after

#father:after{
    content: '';
    display: block;
    clear: both;
}

小结

1、浮动元素后面增加空div，虽然简单，但是代码中尽量避免使用空div

2、设置父级元素的高度，虽然简单，但是元素假设有了固定的高度，就会被限制

3、overflow，简单，下拉的一些场景避免使用

4、父类添加一个伪类：after，推荐使用，写法虽然复杂，但没有副作用
display与float对比

display：方向不可以控制

float：浮动起来会脱离标准文档流，需要解决父级边框塌陷的问题

没有阳光，也一样灿烂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS------浮动（display、float）、父级边框塌陷

5、浮动块级元素：独占一行如：h1-h6 p div 列表…行内元素：不独占一行如：span a img strong…行内元素可以被包含在块级元素中，反之则不可以5.1、display实现行内元素排列的一种方式，但更多的是用float<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</
复制链接

扫一扫