文章目录
高度坍塌原因及其解决方式
高度坍塌的原因
- 原因： 在文档流中，父元素的高度默认是被子元素撑开，也就是子元素多高父元素多高。但当将子元素设置浮动后，而父元素没有设置高度，子元素将完全脱离文档流，导致子元素无法将父元素撑开，导致父元素高度坍塌，而因为父元素高度坍塌，父元素以下的元素就会向上移，导致页面混乱。
解决办法
- 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布局规则
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%;
}