一、浮动
1.1传统网页布局的三种方式（PC端）
- 普通流（标准流）
- 浮动
- 定位
1.2 标准流
标签按照规定好的默认方式排列。
1、跨级元素独占一行：div、p、h ul ol form table
2、行内元素、在一行从左到右排列 ：span、a i em
实际开发中，一个页面基本都包含了这三种布局方式。
1.3 为什么需要浮动
因为用标准流无法完成一些布局效果，因为浮动可以改变标签默认的排列方式。
网页布局第一准则：多个块级元素纵向排列找标准流、多个块级元素横向排列找浮动。
1.4 什么是浮动？
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
float : none | right | left
1.5 浮动特性（重难点）
浮动元素的特性：
1、浮动元素会脱离标准流
- 脱离标准普通流的控制（浮）移动到指定位置（动）（俗称投标）
- 浮动的盒子不再保留原先的位置（相当于升了一个图层）
2、浮动的元素会一行内显示并且元素顶部对齐
- 浮动的元素使互相贴在一起的，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
3、浮动的元素会具有行内块元素的特性
- 任何元素都可以添加浮动，无论是什么模式的元素。
- 如果原来是行内元素，添加浮动之后就具有行内块元素的特性，比如说可以设置宽度和高度。
- 如果块级盒子没有设置宽度，默认和父级一样宽，但是添加浮动后，它的大小根据内容来决定。
总结：
1.6 浮动元素经常和标准流父级搭配使用
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局的第一准则。
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动元素搭配标准流父盒子</title>
<style>
* {
margin: 0;
padding: 0;
list-style-type: none;
}
.box {
width: 991px;
height: 499px;
margin: 0 auto;
}
.left {
float: left;
width: 303px;
height: 736px;
background-color: antiquewhite;
margin-left: ;
}
.right {
float: left;
width: 688px;
height: 736px;
background-color: pink;
}
.right .item li {
float: left;
width: 189px;
height: 241px;
margin-left: 13px;
margin-bottom: 60px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right">
<ul class="item">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>2 常见的网页布局
2.1 常见的网页布局
盒子不设置width就是默认和浏览器一样的宽度。
2.2 浮动布局注意点
先用标准流布局父元素，再用浮动布局子元素。
一个元素浮动了，其他几个兄弟元素应该都浮动。
浮动 的盒子只会影响后面的标准流盒子，不会影响前面的标准流盒子。
3 清除浮动
在实际的页面中，父盒子的高度应该是跟随子盒子的内容变化而变化，也就是父盒子的高度不应该写死，应该用子盒子来撑开。
但是不设置父盒子的高度，就会影响下面的标准流盒子。
解决上面问题的办法：清楚浮动
3.2 清除浮动的本质
如果父盒子有高度则不需要清除浮动，如果父盒子不方便给高度则需要清除浮动。
清除浮动策略就是闭合浮动。
3.3 清除浮动的方法：
1、额外标签法也称为隔墙法，是W3C推荐的做法。在最后一个浮动的子元素后面添加一个额外的标签。
.clear{
clear: both;
}注意这种方法要求大盒子里面新增的盒子必须是块级元素、不能是行内元素。
2、父级添加 overflow 属性
给父元素添加overflow属性，取值hidden。
overflow: hidden
3、父级添加after伪元素（常用的）
4、父级添加双伪元素（常用）
3.4 清除浮动总结
扫一扫
634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
