WEb开发之H5+CSS篇
为什么需要浮动
PC端传统网页布局的方式
-
普通流（标准流/文档流）
标签按照默认方式排列，最基本的布局方式
-
浮动
改变元素默认的排列方式，可以让多个块级元素一行内排列显示
注意：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
-
定位
float属性用于创造浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或另一个浮动框的边缘。
选择器 {
float：属性值；
}
浮动的排列特性
-
浮动元素会脱离文档流（脱标）。
脱离标准普通流的控制（浮）移动到指定位置（动）。
浮动的盒子不再保留原先的位置。
-
浮动的元素会一行内显示并且元素顶部对齐。
-
浮动的元素会具有行内块元素的特性。
如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来定。
浮动的盒子中间没有缝隙，是紧挨在一起的。
行内元素同理。
注意：浮动元素经常和标准流父级搭配使用。
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。
最常见的布局方式
-
自上而下的布局
-
内容左右的布局
-
两种结合的布局
注意：浮动和标准流的父盒子搭配。
一个元素浮动了，理论上其余的兄弟元素也要浮动。
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
为什么要清除浮动
父盒子很多情况下不方便给高度，子盒子浮动不占位置，最后父级盒子高度为0时，就会影响下边的标准流盒子。
浮动元素不占用源文档的位置，所以它会对后面的元素排版产生影响。
清除浮动的方法
清除浮动的本质：清除浮动元素造成的影响。
如果父盒子本身有高度，则不需要清除浮动。
注意：清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。
选择器 {
clear: 属性值（left,right,both）
}
清除浮动采取的策略：闭合浮动。
方法
-
额外标签法（隔墙法）W3C推荐
在浮动元素末尾添加一个空的块级元素标签。
-
父级添加overflow属性
父级添加overflow：hidden，auto，scoll
-
父级添加after伪元素
选择器：after{
content:’ ‘;
height : 0;
display: block;
clear : both;
visibility :hidden;
}
选择器{
*zoom :1;
}
-
父级添加双伪元素
选择器 ：before，选择器：after{
content ; “ ”;
display ;table;
}
选择器：after{
clear : both;
}
选择器{
*zoom :1;
}
切图操作
安装插件。
每日一句
天下之事常成于困约，而败于奢靡。
249
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
