052 - 总为浮云能蔽日（下）
本帖最后由 不二如是 于 2020-9-24 18:38 编辑上一集： 051 - 总为浮云能蔽日（上）
哈哈，废话不多说了，#敲黑板时刻！{:10_281:}
在线视频：传送门
课程思维导图
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清
基础的两列布局中元素部分代码：
<h1>两列布局演示</h1>
<div class="left">
<h2>右侧列巴拉巴拉</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est exercitationem sint animi harum minima veritatis
itaque asperiores numquam cupiditate, odio ad nobis tempore doloribus facilis. Inventore itaque quis obcaecati
adipisci?</p>
</div>
<div class="right">
<h2>右侧列巴拉巴拉</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque natus ducimus, corporis veritatis obcaecati, illo
ex nemo corrupti dicta a iusto totam in nostrum. Accusamus fugit ut magnam facilis facere!</p>
</div>
样式：
div.left {
background-color: pink;
width: 50%;
float: left;
}
div.right {
background-color: lightblue;
width: 50%;
float: right;
}
效果：
如果两个 div 都加上：
padding: 20px;
效果：
发现左右被挤到两行。
因为默认情况下的宽度都是元素内容的宽度。
这样设置 padding 后就超过整体父元素的 50%，所以就变成了两行。
如果设置 box-sizing 属性值为 border-box，那么宽度就包含到边框的位置。
这样就不会超过，在每个 div 样式中添加：
box-sizing: border-box;
效果就和刚开始看的一样了。
三列布局
基础元素：
<h1>三列布局演示</h1>
<div class="left">
<h2>右侧列巴拉巴拉</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est exercitationem sint animi harum minima veritatis itaque asperiores numquam cupiditate, odio ad nobis tempore doloribus facilis. Inventore itaque quis obcaecati adipisci?</p>
</div>
<div class="middle">
<h2>中间列巴拉巴拉</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est exercitationem sint animi harum minima veritatis itaque asperiores numquam cupiditate, odio ad nobis tempore doloribus facilis. Inventore itaque quis obcaecati adipisci?</p>
</div>
<div class="right">
<h2>右侧列巴拉巴拉</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque natus ducimus, corporis veritatis obcaecati, illo ex nemo corrupti dicta a iusto totam in nostrum. Accusamus fugit ut magnam facilis facere!</p>
</div>
样式：
div.left {
background-color: pink;
width: 33.33%;
float: left;
padding: 20px;
box-sizing: border-box;
}
div.middle {
background-color: cornsilk;
width: 33.33%;
float: right;
padding: 20px;
box-sizing: border-box;
}
div.right {
background-color: lightblue;
width: 33.33%;
float: right;
padding: 20px;
box-sizing: border-box;
}
效果：
如果理解上面两列的，三列一样，平均分成 3 份而已。
一个“坑”在于：
**** Hidden Message *****
如果将 .middle 的 float 属性值改为 right，顺序就变了：
这里算是一个重点，涉及了代码执行顺序和浮动方向的问题。
默认代码按从上至下顺序执行，先执行 .left，然后是 .middle，最后是 .right
分别 float 值为：left、left、right 进行布局。
而如果将 .middle 的 float 改为 right，执行顺序不变：.left 还是左浮动、.middle 右浮动霸占了右边，.right 的右浮只能在其左侧靠右了。
要理解浮动是讲究：
先来后到
继续往下看。
clear 属性
有浮动，就有清除浮动，没错，就是设置 clear 属性。
但是注意了：
clear 是清除设置该属性的元素指定边的浮动效果
简单一段代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动</title>
<style type="text/css">
.box {
background-color: green;
width: 200px;
height: 200px;
}
.bc {
background-color: red;
width: 50px;
height: 50px;
}
.left {
float: left;
}
.right {
float: right;
}
.clear-left {
clear: left;
}
.clear-right {
clear: right;
}
</style>
</head>
<body>
<div class="box">
<div class="bc left"></div>
<div class="clear-left">我爱鱼C,ilovefishc.com,我爱Web开发，我爱小甲鱼</div>
</div>
<br><br>
<div class="box">
<div class="bc right"></div>
<div class="clear-right">我爱鱼C,ilovefishc.com,我爱Web开发，我爱小甲鱼</div>
</div>
</body>
</html>
效果：
默认情况下，如果 .bc 设置浮动，下面的 div 元素中的文字就会环绕上去。
现在分别设置清除不同边的浮动，文字都会乖乖的在下面，不会自动环绕上去。
要知道：
设置 float会影响其他相邻元素；
设置 clear 只会影响自身，不会对其他相邻元素造成影响
上面这句话要好好体会哦～
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：053 - 你的定位决定你的地位
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（传送门）（不喜欢更要订阅{:10_297:} ） 不懂啊啊 好棒，谢谢分享！{:10_266:}{:10_266:}{:10_266:} 不错，谢谢
？ 存在空格，会换到下一行 代码实现是有先后顺序的，middle的right的会现在页面右侧实现，right的right就只能在中间。 爱鱼C {:10_246:}
页:
[1]