CSS传统网页布局 之 标准流、浮动（float） 及 清除浮动方法 |
您所在的位置：网站首页 › 网页float布局 › CSS传统网页布局 之 标准流、浮动（float） 及 清除浮动方法 |
CSS传统网页布局 之 标准流、浮动（float） 及 清除浮动方法
|
传统网页布局的三种方式
普通流（标准流）浮动定位
一、标准流（普通流/文档流）
标签按照规定好的默认方式排列。 1. 块级元素独占一行，从上到下排列 常用元素：div、hr、p、h1~h2、ul、ol、dl、form、table2. 行内元素会按照顺序，从左到右排列，碰到父元素边缘自动换行 常用元素：span、a、i、em 二、浮动1. 为什么需要浮动 ？ 很多布局效果标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。 浮动最典型应用：可以让多个块级元素一行内排列显示。 多个块级元素纵向排列找标准流，多个块级元素横行排列找浮动。 2. 什么是浮动？ float属性用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或者另外一个浮动框的边缘。 语法： 选择器 { float: 属性值; } 属性值描述none元素不浮动（默认值）left元素向左移动right元素向右移动3. 浮动特性 3.1 浮动元素会脱离标准流 脱离标准流的控制，移动到指定位置浮动的盒子不再保留原先的位置，其他盒子会占据他原先的位置，而出现两个盒子层叠的效果（浮动盒子悬浮在其他盒子表面）。3.2 浮动的元素会一行内显示并且元素顶部对齐 如果多个盒子都设置的浮动，则他们会按照属性值一行内显示并且顶端对齐排列。浮动元素相互贴靠在一起，没有缝隙，如果父级元素宽度装不下浮动盒子，多出的盒子会另起一行对齐。3.3 浮动的元素会具有行内块元素的特性 任何模式的元素添加浮动之后都具有行内块元素相似的特性。块级元素如果没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。4. 浮动元素经常和标准流父级搭配使用 为了约束浮动元素位置，先用标准流父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
float+父级标准流搭配应用案例：
类似这种几个排版相同的盒子排成一排，可用无序列表来做。 * { margin: 0; padding: 0; } li { list-style: none; } .box { width: 1226px; height: 285px; background-color: pink; } .box li { width: height: 285px; float: left; margin-left: 14px; background-color: blue; } /* 注意此处的权重要比上面的权重高，才能去除最后一个盒子的右外边距 */ .box .last { margin-left: 0px; /*去除最后一个盒子的右外边距，否则最后一个盒子会被挤到下一行。*/ } 1 2 3 4
将一个整体分为左右两部分，整体使用一个div，在其中嵌套两个浮动div，右边的div中放八个浮动无序列表或者div（此处用的是div）。 .box{ width:1226px; height: 615px; margin: 0 auto; background-coloe: pink; } .left{ float: left; width: 234px; height: 615px; background-coloe: purple; } .right{ float: right; width: 992px; height: 615px; background-color: skyblue; } .right>div{ float: left; width: 234px; height: 300px; margin-left: 14px; margin-bottom: 14px; } 左 1 2 3 4 5 6 7 8 三、清除浮动1. 为什么要清楚浮动？ 由于父级盒子在很多情况下，不方便给高度，但是子盒子浮动又不占位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。 2. 清除浮动的本质 清除浮动元素造成的影响如果父盒子本身有高度，则不需要清除浮动清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流。3. 清除浮动策略 闭合浮动。只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。 4. 语法 选择器 { clear: 属性值;} 属性值描述left不允许左侧有浮动元素right不允许右侧有浮动元素both同时清除两侧浮动5. 清除浮动的方法 5.1 额外标签法 额外标签法也称为隔墙法，W3C推荐做法。 额外标签会在浮动元素末尾加一个空标签。例如，或者其他标签（如等）。 优点：通俗易懂，书写方便 缺点：添加许多无意义标签，结构化较差 注意：要求这个新空标签必须是块级元素。 5.2 父级添加overflow 可以给父级添加overflow属性，将其属性值设置为hidden、auto或者scroll。 优点：代码简洁 缺点：无法显示溢出部分 5.3 :after伪元素法 :after方式是额外标签法的升级版，也是给父元素添加。 .clearfix:after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{ *zoom: 1; /* IE6、7专有 */ }优点：没有增加标签，结构简单 缺点：要照顾低版本浏览器 5.4 双伪元素清除浮动 也是给父元素添加 .clearfix:befor,.clearfix:after{ content: ""; display: table; } .clearfix:after{ clear: both; } .clearfix:{ *zoom: 1; /* IE6、7专有 */ }优点：代码更简洁 缺点：照顾低版本浏览器
|
【本文地址】
今日新闻 |
推荐新闻 |