今日关于浮动需要学习的内容：
1.css布局三种机制：标准流、浮动、定位。
2.为什么需要浮动。
3.浮动的一些特性。
4.子盒子浮动后与兄弟盒子、父级盒子的关系。
5.为什么要清除浮动？清除浮动的本质？
6.如何清除浮动？
问题1：标准流、浮动、定位
标准流：分为水平和垂直排版①块级元素会独占一行，自上而下排列
常用块级元素标签：div、hr、p、h1~h6、ul、ol、dl、form、table...
②行内元素不独占一行，从左到右排列，遇到父级元素边缘换行
常用行内元素标签：span、a、i、em...
浮动：float:属性值(none,left,right)。会脱离标准流。
定位：position:属性值。（absoult、fixed定位会导致元素脱离文档流）
问题2：为什么需要浮动
在一些布局要求下，我们需要浮动来使元素脱离文档流来实现想要的布局。
可以通过浮动，打破标准流块级元素独占一行的规则，脱离标准流。
问题3：浮动的特性
1.浮动会脱离标准流。不再占有原来的位置。位置会被后面的标准流元素补齐。
2.浮动流只有水平排版。浮动后，遇到父级元素边缘依然会换行。浮动元素之间默认无缝隙。而且由于只有水平居左或居右，margin:0 auto;自动居中会失效。
3.任何元素都可以浮动。无论是行内元素、行内块元素还是块级元素都可以添加浮动。并且行内元素添加浮动后可以设置宽高。（类似行内块元素的特性）
问题4：子盒子浮动后与兄弟盒子、父级盒子的关系
与兄弟盒子： 会影响后面的标准流元素，占据浮动的元素的原位置，导致布局混乱。
与父级盒子：
1.如果子盒子全部浮动，那么它们均不占有位置，若父级盒子没有设置高度，那么父级盒子会高度为0，产生高度塌陷问题。
2.添加浮动的子盒子会受父级盒子边框和内边距的影响。（定位可以不受这一影响）
问题5：为什么要清除浮动
我们已知子盒子脱标后可能会产生两种问题：一是后面的标准流盒子会受到影响而去占据浮动元素原先的位置，导致布局混乱。二是，如果子盒子都浮动，且父级盒子没有设置高度，会出现高度塌陷问题。为了解决浮动带来的这样的影响，让整体布局恢复正常，我们就需要清除浮动，所以本质上清除浮动并不是真的清除浮动，而是清除浮动后所带来的影响，用到的属性clear:both。
问题6：如何清除浮动
1.额外标签法(不推荐，出现冗余的结构)：在最后一个浮动元素的末尾，加一个空的块级元素。例如：<div style="clear:both"></div>。
2.给父元素添加overflow:hidden属性，构建BFC盒子（不推荐）。其实这里的overflow属性值可以是除了visable以外的任何属性值，它们都可以构建BFC盒子。按照BFC盒子的特点，浮动元素的高度也包括在内，从而让父级盒子的高度撑起来，达到清除浮动的效果。但严格意义上来讲，其实并没有任何一个元素的浮动被清除。
3.伪元素清除浮动法（推荐）。分为单伪元素和双伪元素，更推荐单伪元素：
单：
.clearfix::after{ content: ''; display: block; clear: both; }
.clearfix{ *zoom: 1; }
双：
.clearfix::before,.clearfix::after{ content: ''; display: block; clear: both; }
.clearfix{ *zoom: 1; }
双伪元素清除浮动法更符合浮动元素两边闭合清除浮动的思想。不过目前在使用效果上，单双伪元素一致。
网友评论