一、浮动
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、父级添加双伪元素(常用)