目标
- 能够说出为什么需要浮动
- 能够说出浮动的排列特性
- 能够说出 3 中最常见的布局方式
- 能够说出为什么需要清除浮动
- 能够写出至少两种清除浮动的方法
- 能够利用 PhotoShop 实现基本的切图
- 能够利用 PhotoShop 实现切图
- 能够完成学成在线的页面布局
目录
- 浮动
- 常见网页布局
- 清除浮动
- PS 切图
- 学成在线案例
传统网页布局
网页布局的本质 —— 用 CSS 摆放盒子。将盒子摆放到相应的位置
CSS 提供了三种传统布局方式（简单来说就是盒子进行排列顺序的方式）
- 普通流（标准流）
- 浮动
- 定位
标准流（普通流 / 文档流）
所谓的标准流，就是标签按照规定好的默认方式排列
- 块级元素会独占一行，从上向下排列
- 行内元素会按照从左到右顺序排列，碰到父元素边缘则自动换行
标准流是最基本的布局方式
注意：
在实际开发中，一个页面基本都包含了标准流、浮动、定位这三种布局方式
（移动端会学新的布局方式）
浮动
浮动的必要性
多个块级元素需要排列到一行上，此时转换为行内块元素后，块级元素之间会有一个默认且不可设置的空白间隔。而在实际开发中，我们需要对间隔进行准确的设置
实现两个盒子分别左对齐和右对齐
总结：有很多布局效果，标准流没办法完成
此时可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式
浮动最典型的应用：可以让多个块级元素一行内排列显示
网页布局的第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
浮动定义
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
<body>
<div class="div left">青龙</div>
<div class="div right">白虎</div>
<div class="div left">朱雀</div>
<div class="div right">玄武</div>
</body>
<style>
.div {
width: 50px;
height: 50px;
background-color: #ff8500;
border: 2px solid red;
text-align: center;
margin: 0 auto;
padding: 125px;
font: 700 25px 'Microsoft YaHei UI';
}
.left {
float: left;
}
.right {
float: right;
}
</style>效果图
浮动特性（重难点）
加了浮动之后的元素，会具有很多特性
- 浮动元素会脱离标准流（脱标）
- 浮动的元素会在一行内显示并且元素顶部对齐
- 浮动元素会具有行内块元素的特性
脱标
- 脱离标准普通流的控制（浮）移动到指定位置（动），俗称脱标
- 浮动的盒子不再保留原先的位置
- 后续的盒子会占据已经浮动的盒子的位置，依次向前移动已浮动盒子的大小的距离
- 浮动的盒子和占据原先浮动盒子位置的盒子将会发生叠加的效果
<body>
<div class="box left">浮动盒子</div>
<div class="box1">标准流盒子</div>
<div class="box left">浮动盒子</div>
<div class="box1">标准流盒子</div>
</body>
<style>
.box {
width: 100px;
height: 100px;
border: 2px solid darkred;
background-color: lightskyblue;
text-align: center;
font: 20px 'Microsoft YaHei UI';
}
.box1 {
width: 200px;
height: 200px;
border: 2px solid darkred;
background-color: greenyellow;
text-align: center;
font: 20px 'Microsoft YaHei UI';
}
.left {
float: left;
}
</style>效果图
浮动的元素会在一行内显示并且元素顶部对齐
如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出来的盒子会另起一行对齐
浮动元素会具有行内块元素特性
任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后都具有行内块元素相似的特性
浮动元素经常搭配标准流的父元素
为了约束浮动元素位置，网页布局一般采取的策略是：
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
<style>
.box {
width: 1226px;
height: 460px;
background-color: white;
margin: 0 auto;
}
.box .left {
width: 230px;
height: 460px;
background-color: darkkhaki;
float: left;
}
.box .right {
width: 970px;
height: 460px;
background-color: #ff8500;
float: right;
}
</style>
<body>
<ul class="box">
<li>图一</li>
<li>图二</li>
<li>图三</li>
<li class="last">图四</li>
</ul>
</body>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.box {
width: 1226px;
height: 285px;
background-color: white;
margin: 10px auto;
text-align: center;
font: 20px '华文宋体';
}
/*巧妙使用权重*/
.box li {
width: 280px;
height: 285px;
background-color: darkkhaki;
float: left;
margin: 0 10px;
}
.box .last {
margin-right: 0;
}
</style>
CSS 浮动实例
<div class="box">
<div class="box1 left" style="line-height: 700px">
MIX FOLD 小米折叠屏手机
</div>
<div class="box2 right shuipingjuzhong">
<div class="box-up">
<ul>
<li class="upup">Note 10 Pro</li>
<li class="upup">Redmi Note 10 5G</li>
<li class="upup">小米MIX FOLD</li>
<li class="upup">小米11 Ultra</li>
</ul>
</div>
<div class="box-down">
<ul>
<li class="downdown">小米11 Pro</li>
<li class="downdown">小米11 青春版</li>
<li class="downdown">K40 游戏增强版</li>
<li class="downdown">黑鲨4 Pro</li>
</ul>
</div>
</div>
</div>* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.box {
width: 1000px;
height: 700px;
background-color: darkkhaki;
margin: 0 auto;
font: 20px 'Microsoft YaHei UI';
text-align: center;
color: red;
}
.box .box1 {
width: 300px;
height: 700px;
background-color: darkblue;
}
.box .box2 {
width: 700px;
height: 700px;
background-color: white;
}
.box .box-up {
width: 700px;
height: 340px;
background-color: white;
margin-bottom: 20px;
}
.box .box-down {
width: 700px;
height: 340px;
background-color: white;
}
.box .upup {
width: 150px;
height: 320px;
background-color: lightseagreen;
margin: 10px 10px;
float: left;
}
.box .downdown {
width: 150px;
height: 320px;
background-color: lightcoral;
margin: 10px 10px;
float: left;
}
.left {
float: left;
}
.right {
float: right;
}
.shuipingjuzhong {
line-height: 340px;
}
常见的网页布局
<div class="box">
<div class="top">top</div>
<div class="banner">
<div class="top">banner-top</div>
<div class="div">
<ul class="ul1">
<li class="li1">div1</li>
<li class="li1">div2</li>
<li class="li1">div3</li>
<li class="li1">div4</li>
</ul>
<ul class="ul2">
<li class="li2">div5</li>
<li class="li2">div6</li>
<li class="li2">div7</li>
<li class="li2">div8</li>
</ul>
</div>
<div></div>
</div>
<div class="bottom">bottom</div>
</div>* {
padding: 0;
margin: 0;
text-align: center;
}
li {
list-style: none;
}
.box {
width: 600px;
height: 600px;
border: 2px solid red;
margin: 10px auto;
}
.box .top {
width: 599px;
height: 50px;
background-color: #ff8500;
margin: 0 auto;
line-height: 50px;
}
.box .banner {
width: 550px;
height: 440px;
background-color: red;
margin: 10px auto 0;
}
.box .banner .top {
width: 550px;
height: 100px;
background-color: purple;
margin: 0 auto;
line-height: 100px;
}
.box .banner .div {
height: 320px;
background-color: chartreuse;
margin: 0 auto;
}
.box .banner .ul1 {
height: 110px;
background-color: springgreen;
margin: 10px auto 0;
line-height: 110px;
}
.box .banner .ul2 {
height: 210px;
background-color: cornflowerblue;
margin: 10px auto 0;
line-height: 210px;
}
.box .banner li {
width: 125px;
background-color: darkblue;
margin: 0 auto;
float: left;
}
.box .banner .li1 {
height: 110px;
background-color: darkblue;
margin-left: 10px;
}
.box .banner .li2 {
height: 210px;
background-color: darkblue;
margin-left: 10px;
}
.box .bottom {
width: 599px;
height: 90px;
background-color: #508fe2;
margin: 10px auto 0;
line-height: 90px;
}
浮动布局注意点
- 浮动和标准流的父盒子搭配
- 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
- 一个元素浮动了，理论上其余的兄弟元素也要浮动
- 一个父级盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题
- 浮动的盒子只会影响排在浮动盒子后面的标准流，不会影响前面的标准流
807
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
