第9-10章：浮动和定位布局
9.1 普通文档流布局
- W3C标准中的
normal flow，叫做普通文档流 /正常文档流/普通流。
- 所谓 普通文档流就是指block(块)元素由上到下逐行排序，inline(行内)元素在行内从左到右排列，也是页面默认的布局方式 。
- 如果发现默认的页面布局无法满足要求，也可以通过浮动或者定位脱离文档流，实现更多其他形式的页面布局。
9.2 浮动布局
- 当我们想要实现例如水平两列或多列布局时，就可以考虑 使用
float属性实现水平方向的并排布局 。
-
float属性有三个取值：left、right、none。
- 当元素 设置了
float属性后，元素会脱离文档流浮动到左边或者右边，并使得后面的文字或其他元素围绕它 。
9.2.1 浮动的影响
对自身的影响
- 当元素定义了
float:left或者float:right时，会将该元素变成block元素。 （意味着浮动元素可以设置块元素的样式属性，比如width、height、padding、margin等）
对父级元素的影响
- 当元素定义了
float属性时，如果父元素的height属性未定义或者height值小于该浮动元素时，会出现“父元素高度塌陷”的情况 ，也就是说该浮动元素会脱离父元素。因为该浮动元素的高大于包含子级的容器元素的高度时，就意味着父元素不能将子元素包裹起来，说白了，就是老爸管不住儿子，儿子离家出走了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
border: 1px solid black;
}
.float{
float: left;
width: 100px;
height: 50px;
background-color: gray;
}
</style>
</head>
<body>
<div class="parent">
<div class="float"></div>
</div>
</body>
</html>
对同级元素的影响
- 当 元素定义了
float属性时，如果后面的同级元素也是浮动元素，则根据浮动方向紧挨着排列 ；
- 如果后面的同级元素是非浮动元素，则会填补浮动元素原来位置，被该浮动元素遮盖；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 50px;
}
.wrapper{
width: 800px;
border: 1px solid black;
}
.float{
float: left;
}
.me{
background-color: gray;
}
.brother{
width: 120px;
}
.brother.float{
background-color:aquamarine;
}
.brother.normal{
background-color: coral;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="me float"></div>
<div class="brother normal">1</div>
<div class="brother float">2</div>
</div>
</body>
</html>
对子级元素的影响
- 当元素定义了
float属性时，作为一个浮动的容器，即便未设置height属性，也会自动适应子级浮动元素的高度，而 不会出现“父元素高度塌陷”的情况；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
float: left;
border: 1px solid black;
}
.children{
float: left;
height: 50px;
width: 100px;
background-color: gray;
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
</html>
9.2.2 清除浮动
- 我们可以通过常见的三种方法来清除浮动，从而避免布局的错乱。
clear:both
-
clear属性取值有三个：left/right/both，也就是清除左边/右边，或者清除所有浮动。
-
clear属性不是设置在浮动元素本身，而是设置在浮动元素后面的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrapper{
width: 800px;
border: 1px solid black;
}
.float{
width: 100px;
height: 50px;
float: left;
background-color: gray;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="float"></div>
<div class="clear"></div>
</div>
</body>
</html>
overflow:hidden
-
overflow:hidden样式设置在浮动元素的父元素 可以清除浮动。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrapper{
width: 800px;
border:1px solid black;
}
.float{
float: left;
width: 100px;
height: 50px;
background-color: gray;
}
</style>
</head>
<body>
<div class="wrapper" style="overflow: hidden;">
<div class="float"></div>
</div>
</body>
</html>
::after伪元素
- 上述的两种方式其实都存在一定的弊端，
clear:both的方式需要添加在浮动元素同级的每个元素上，造成很多冗余样式代码；而overflow:hidden的方式虽然清除了浮动，但同时也强制隐藏父容器的内容。
- 在实际开发中 ，我们 通常采用的解决方案是通过
::after伪元素结合clear:both，定义成一个清除浮动的公共类，进行全局引用 ，以便减少CSS代码。使用的时候，设置在浮动元素的父元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrapper{
width: 800px;
border:1px solid black;
}
.float-left{
float: left;
background-color: gray;
width: 100px;
height: 50px;
}
.float-right{
float: right;
background-color:saddlebrown;
width: 100px;
height: 50px;
}
.clearfix{*zoom: 1;}/*解决IE6&7的浮动问题*/
.clearfix::after{
clear: both;
content: '';
display: block;
height: 0;
visibility: hidden;
}
</style>
</head>
<body>
<div class="wrapper clearfix">
<div class="float-left"></div>
<div class="float-right"></div>
</div>
</body>
</html>
10.1 定位布局
- 浮动和定位布局是CSS两大布局方式，定位布局 虽然没有浮动布局灵活，但是却 可以精准地定位页面中元素的位置。
10.1.1 position属性
- CSS通过
position属性实现 定位布局 ，总共有四种方式：static(静态定位)、fixed(固定定位)、relative(相对定位)、absolute(绝对定位) 。
- 默认情况下，
fixed和absolute定位是相对于浏览器窗口而言的，而relative定位则是相对于元素的原始位置而言的。
-
position属性通常配合 top、bottom、left、right属性 一起使用，也只有 当元素定义position为非static属性值时 ，方向偏移属性 才会生效。
相对于父元素定位
- 相对于父元素定位的方式：给指定祖先元素定义成
position:relative，然后给子元素定义position:absolute;，然后配合元素的方向偏移属性来定位。
-
absolute绝对定位是相对于外层最近一个设置position属性值为非static的祖先元素来进行定位的 。
-
position:absolute;会将元素转换成block块元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.father{
position: relative;
width: 160px;
height: 30px;
background-color: gray;
}
.son{
position: absolute;
bottom: -10px;
right: 80px;
width: 0px;
height: 0px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 10px solid gray;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
10.1.2 z-index属性
- 实际上页面是三维结构的，除了x轴、y轴还有z轴。
- 默认情况下，元素的
z-index属性处于无效的休眠状态，只有当元素定义了position属性值为非static时才会被激活生效 。
z-index属性值 |
说明 |
| auto |
默认值，堆叠顺序与父元素相等 |
| number |
可以为正整数、0和负整数 |
| inherit |
从父元素继承z-index属性值 |
- 根据W3C标准的定义，
z-index属性用来来控制元素的堆叠顺序，z-index属性数值大的在前面，如果数值相同，则遵循“后来者居上”规则叠加。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
font-size: 50px;
position: absolute;
}
.A{
background-color: #000000;
top: 10px;
left: 10px;
}
.B{
background-color:orangered;
top: 40px;
left: 40px;
/*通过z-index调整层叠位置*/
z-index: 2;
}
.C{
background-color:greenyellow;
top: 70px;
left: 70px;
}
</style>
</head>
<body>
<div class="A"></div>
<div class="B"></div>
<div class="C"></div>
</body>
</html>
