CSS_浮动排版布局

最新推荐文章于 2024-07-08 20:41:07 发布

hello~bye~

最新推荐文章于 2024-07-08 20:41:07 发布

阅读量1.2k

点赞数 1

分类专栏：前端（HTML、css）文章标签：浮动排版布局

本文链接：https://blog.csdn.net/qq_36654309/article/details/109765436

版权

前端（HTML、css）专栏收录该内容

16 篇文章 0 订阅

订阅专栏

当在排版布局时，abc都用了float，此时abc相当于脱离父元素浮出来了，但是d没有使用浮动，就会出现d的一部分处在abc的下面(因为abc浮上去了),d就被遮住了一部分，这时候有几种处理方法：

（1）在abc的外层加上一层父元素，并设定高度

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
    .outer{
        height: 100px;
    }
    <!--其他的样式设置省略掉了-->

    </style>
</head>
<body>
    <div class="outer">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
    </div>
    <div class="d"></div>
</body>
</html>

为什么要设置父元素呢，子元素不是设置了大小，不是应该被子元素撑开吗？？

因为abc三个子元素设置了浮动，相当于浮起来了，不占据空间，所以撑不开，所以设置高度是一种解决这个问题的方法。

（2）方法2：给父元素设置属性overflow:auto;

overflow:溢出的意思。

auto:自动调整的意思

意思是对于超出父元素的元素，父元素自动调整高度，就不会影响后面的布局

        .outer{
            overflow: auto;
        }

（3）方法3：clear：left/right/both

谁不希望受到浮动的影响谁就设置clear属性

此时d不想受到浮动的影响，所以将.d设置clear属性

.d{
            width: 100%;
            background: lightskyblue;
            height: 200px;
            clear: both;
        }

hello~bye~

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
CSS_浮动排版布局

当在排版布局时，abc都用了float，此时abc相当于脱离父元素浮出来了，但是d没有使用浮动，就会出现d的一部分处在abc的下面(因为abc浮上去了),d就被遮住了一部分，这时候有几种处理方法：（1）在abc的外层加上一层父元素，并设定高度<!DOCTYPE html><html lang="en"><head> <style type="text/css"> .outer{ height: 100px;
复制链接

扫一扫

专栏目录