1.标准流(normal flow)
html语言当中另外一个相当重要的概念----------标准流！或者普通流。标准流实际上就是一个网页内标签
元素正常排列的顺序的意思；比如块级元素会独占一行，行内元素会按顺序依次从左向右，从上向下排列；
按照这种大前ᨀ的布局排列之下绝对不会出现列外的情况叫做标准流布局，也称做流式布局。
标准流，流式布局
流式布局.png
2.浮动的本质
•word中图片和文字混排
•浮动（float），浮动的盒子可以向左或向右移动，直到它的外边缘碰到包含盒子或另一个浮动盒子的边
框为止
•浮动做布局，仅仅是附带来的，是滥用的结果。本质是用于图文排版。
3.元素的浮动属性float
什么是浮动？
元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。
如何定义浮动？
在CSS中，通过float属性来定义浮动，其基本语法格式如下：
选择器{float:属性值;} none ,left, right
float属性值：
属性值 描述
left 元素向左浮动
right 元素向右浮动
none 元素不浮动（默认值）
4.浮动特性★★★★★
1.浮动脱离标准流，不占位置，但会影响标准流。但会影响文字排版，浮动只有左右浮动。
2. 浮动的元素A排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一
个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。
3.一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。
4.浮动根据元素书写的位置来显示相应的浮动。
5. 元素添加浮动后，如果没有设置宽高的话，元素会具有行内块元素的特性。元素的大小完全取决于定义
的大小或者默认的内容多少。也就是具有了包裹性。
6.浮动具有破坏性，元素浮动后，破坏来原来的正常流布局，造成内容
7.同一行当中先写浮动的标签
5.父容器高度塌陷
• 如果一个标准流中的盒子所有的子元素都进行了浮动，而且盒子没有设置高度，那么父容器整个高度会塌陷。
• 如何实现自适应包裹浮动子元素呢？clearfix
6.overflow属性的应用
当盒子内的元素超出盒子自身的大小时，内容就会溢出（IE6除外），这时如果想要规范溢出内容的显示方
式，就需要使用CSS的overflow属性，其基本语法格式如下：
选择器{overflow:属性值;}
overflow属性的常用值
属性值 描述
visible 内容不会被修剪，会呈现在元素框之外（默认值）
hidden 溢出内容会被修剪，并且被修剪的内容是不可见的
auto 在需要时产生滚动条，即自适应所要显示的内容
scroll 溢出内容会被修剪，且浏览器会始终显示滚动条
7.清除浮动
语法： clear：left|right|both;
clear是指让当前元素放置的时候，会自动判断左侧或右侧或者双侧是否有浮动的元素，如果有就往下放，
如果没有的就放下。
在CSS中，clear属性用于清除浮动，其基本语法格式如下：
选择器{float:属性值;}
clear属性的常用值
属性值 描述
left 不允许左侧有浮动元素（清除左侧浮动的影响）
right 不允许右侧有浮动元素（清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响
常用四种清除浮动的方法：
− 方法一：使用空标记清除浮动，隔墙放。增加标签。
− 方法二：使用overflow属性清除浮动。会误伤。
− 方法三：使用after伪对象清除浮动。
− 方法四：使用before after伪对象清除浮动
− Clearfix
after伪对象清除浮动时的注意事项：
1. 必须为需要清除浮动的元素伪对象设置“height:0;”样式，否则该元素会比其实际高度高出若干像素。
2. 必须在伪对象中设置content属性，属性值可以为空，如“content: "";”。
.clearfix:after{ /*对类名为father父元素应用after伪对象样式*/
display:block;
clear:both;
content:"";
visibility:hidden;
height:0;
}
8.闭合浮动(直接用就可以)
after 和 before伪对象清除浮动时的注意事项：
.clearfix::before,.clearfix::after{
content:””;
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{*zoom:1;}//兼容IE6
9.触发BFC
条件:1.relative absolute
2.float
3.display:table
4.overflow:hidden/auto
5.*zoom:1(触发IE6，7的haslayout,和BFC基本上是一致的)
特点:1.具有包裹性(里面的子元素无论怎么样设置都不影响父元素的布局,外边距合并失效,前提是不设置
他[也就是父级]的宽高)
网友评论