W3C 标准中的 normal flow, 叫做普通文档流 / 正常文档流 / 普通流
所谓 普通文档流就是指 block(块) 元素由上到下逐行排序, inline(行内) 元素在行内从左到右排列, 也是页面默认的布局方式
如果发现默认的页面布局无法满足要求, 也可以通过浮动或者定位脱离文档流, 实现更多其他形式的页面布局
9.2 浮动布局
当我们想要实现例如水平两列或多列布局时, 就可以考虑 使用 float 属性实现水平方向的并排布局
float 属性有三个取值: leftrightnone
当元素 设置了 float 属性后, 元素会脱离文档流浮动到左边或者右边, 并使得后面的文字或其他元素围绕它
9.2.1 浮动的影响
对自身的影响
当元素定义了 float:left 或者 float:right 时, 会将该元素变成 block 元素 (意味着浮动元素可以设置块元素的样式属性, 比如 widthheightpaddingmargin 等)
对父级元素的影响
当元素定义了 float 属性时, 如果父元素的 height 属性未定义或者 height 值小于该浮动元素时, 会出现父元素高度塌陷的情况 , 也就是说该浮动元素会脱离父元素因为该浮动元素的高大于包含子级的容器元素的高度时, 就意味着父元素不能将子元素包裹起来, 说白了, 就是老爸管不住儿子, 儿子离家出走了
对同级元素的影响
当 元素定义了 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 属性通常配合 topbottomleftright 属性 一起使用, 也只有 当元素定义 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>
来源: http://www.jianshu.com/p/55e92fd501e0