高度坍塌、BFC、圣杯布局

最新推荐文章于 2023-03-01 20:05:47 发布

41%加1

最新推荐文章于 2023-03-01 20:05:47 发布

阅读量137

点赞数

本文链接：https://blog.csdn.net/fyrrr/article/details/110941787

版权

文章目录

高度坍塌原因及其解决方式
- 高度坍塌的原因
- 解决办法
BFC
圣杯布局

高度坍塌原因及其解决方式

高度坍塌的原因

原因：在文档流中，父元素的高度默认是被子元素撑开，也就是子元素多高父元素多高。但当将子元素设置浮动后，而父元素没有设置高度，子元素将完全脱离文档流，导致子元素无法将父元素撑开，导致父元素高度坍塌，而因为父元素高度坍塌，父元素以下的元素就会向上移，导致页面混乱。

解决办法

html代码

<div class="body clearfix">
    <div class="content">Lorem ipsum dolor sit.</div>
    <div class="content">Error quidem labore animi.</div>
    <div class="content">Sunt nemo veniam quidem.</div>
    <div class="content">Facilis similique nesciunt at?</div>
    <div class="content">Minus, pariatur? Ab, nemo.</div>
</div>

为每个元素设置基础样式

.body{
        background-color: lightblue;
}
.body .content{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}

当给类名为content的元素设置float：left或float：right时，外层div将会出现高度坍塌。

给父元素设置after伪类（万能消除法）

.clearfix::after{
    content: "";
    clear: both;
    display: block;
}
.body{
    width: 100%;
    background-color: lightblue;
}
.body .content{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}

为外层div的最后添加一个元素，将其display设置为block，内容设为空，将其clear属性设置为both，清除浮动。

给父元素直接设置高度

.body{
    width: 100%;
    background-color: lightblue;
    height: 100px;
}
.body .content{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}

直接给父元素设置高度，高度固定，只适合高度固定的布局，不推荐使用。

使用overflow和zoom来清除浮动

.body{
    width: 100%;
    background-color: lightblue;
    overflow: hidden;/*或overflow:auto;*/
    zoom: 1;/*针对IE6浏览器的兼容*/
}
.body .content{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}

overflow属性规定当内容溢出元素框时发生的事情。
overflow：hidden实际上就创建了一个块级格式化上下文(BFC)
只有block-level box参与BFC
block-level box指的是display 属性为 block, list-item, table 的元素，会生成 block-level box。
BFC布局规则
1）内部的Box会在垂直方向，一个接一个地放置。
2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3）每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4）BFC的区域不会与float box重叠。
5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6）计算BFC的高度时，浮动元素也参与计算

而此处当设置overflow：hidden（hidden不为visible时），触发BFC机制，计算BFC的高度时，浮动元素也参与计算。

将父元素浮动起来

.body{
    width: 100%;
    background-color: lightblue;
    float: left;
}
.body .content{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}

该方法虽然可以解决高度坍塌的问题，但是会对后续布局产生影响，不推荐使用。

BFC

BFC(Block formatting context)块级格式化上下文
只有Block-level box参与
其规定了Block-level box中如何布局
且这个区域与外部区域毫不相干

Box（盒子）

css布局的对象和基本单位，一个页面由多个box组成，而元素的类型和display属性决定了box的类型。
block-level box: display 属性为 block, list-item, table 的元素，会生成 block-level box 。并且参与BFC
inline-level box: display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context（IFC）

Formatting Context（格式化上下文）

定义的是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
常见有block formatting context(BFC)和inline formatting context(IFC)

BFC布局规则

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

如何触发BFC

根元素或其它包含它的元素
非块级元素具有 display: inline-block，table-cell, table-caption, flex, inline-flex
块级元素具有overflow ，且值不是 visible
浮动（float不为none）
绝对定位的元素

BFC作用

清除浮动
解决外边距合并的问题
布局：自适应两栏布局

圣杯布局

圣杯布局的要求

header和footer各自占领屏幕所有宽度，高度固定。
中间的container是一个三栏布局。
三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
中间部分的高度是三栏中最高的区域的高度。

圣杯布局的优点

页面在加载时，先加载中间的主体部分

圣杯布局代码

HTML代码

<header class="header">header</header>
    <div class="container">
        <div class="middle">middle</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
<footer class="footer">footer</footer>

CSS代码

.header{
        background-color: lightgray;
        height: 80px;
        width: 100%;
    }/*头部基础样式*/
.footer{
        background-color: lightgray;
        height: 80px;
        width: 100%;
        bottom: 0;
        clear: both;
    }/*清除浮动*/
.container{
        padding-left: 150px;
        padding-right: 150px;
    }/*为left，right预留位置*/
.middle{
        width: 100%;
        height: 600px;
        float: left;
        background-color: lightgreen;
    }/*设置左浮动*/
.left{
        width: 150px;
        height: 600px;
        float: left;
        background-color: lightpink;
        margin-left: -100%;
        position: relative;
        right: 150px;
    }/*把元素放入预留的位置*/
.right{
        width: 150px;
        height: 600px;
        float: left;
        background-color: lightpink;
        margin-right: -100%;
    }