最近开始学习经典的两大布局---圣杯布局&&双飞翼布局,好记性不如烂笔头,走起
布局要求
1. main模块最先加载
2. main模块宽度占满父容器
3. main模块浮动,left、right模块居左右
复制代码
来个例子
先看小例子的最终效果(前为未清除浮动,后为清除浮动)
基础结构
<header>圣杯布局</header>
<div class="content clearfix">
<div class="main text">main</div>
<div class="left text">left</div>
<div class="right text">right</div>
</div>
<footer>footer</footer>
复制代码
实现步骤
- 因为要将main模块最先加载,所以根据解释机制从上至下的特点,将main模块放置在父容器的最上面;最开始布局如下
.main {
float: left;
width: 100%;
height: 200px;
background: #000;
}
复制代码
3. 若要实现left居左,可以考虑如下设置
.left {
float: left;
width: 200px;
height: 200px;
background: pink;
position: relative;
left: -200px;
margin-left: -100%;
}
复制代码
4. 同理设置right模块,此时就能实现未清除浮动时的布局
.right {
float: left;
width: 200px;
height: 200px;
background-color: #4ddef1;
margin-left: -200px;
position: relative;
left: 200px;
}
复制代码
5. 可以看见foot模块因content内所有子元素均脱离文档流而上浮,于是被盖住了,此时就引出了另一个话题,清浮 6. 此处我用的是尼古拉斯大师清浮,代码如下(清浮的总结在下文),此时就完成我们的经典布局啦
.clearfix::after {
content: "";
display: table;
clear: both;
}
复制代码
清浮
####### 清浮目前业内有五种方法(我个人觉得可以算是三种,因为13均是clear:both;只不过利用了伪元素等特性简化了一下而已;25均是触发BFC)
- 在父级底部添加一个div style="clear: both";
- 在父级样式内添加:overflow: hidden/auto/scroll;======触发BFC(块级格式化上下文)
- 伪元素清除浮动=====父级添加伪元素,定义样式为block且clear:both(本质上就是第一种的简化版)
- 将父级元素设置浮动
- 尼古拉斯大师清浮====父级定义样式为display: table====默认触发BFC(块级格式化上下文)