传统网页三种布局形式:
①普通流(标准流):标签按照规定好默认方式排列
②浮动
③定位
ps:实际开发中,一个页面基本上都包含了三种布局方式
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动
选择器 {float:属性值;}
float属性用于创建浮动框,将其移动到一边,知道左边缘触及包含块或另一个浮动框的边缘
none(元素不浮动 默认值)
left(元素向左浮动)
right(元素向右浮动)
浮动特性
1.脱离标准普通流的控制移动到指定位置,脱标
2.浮动的盒子不再保留原先的位置
如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对齐排列
ps:浮动的元素是互相贴靠在一起的,如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐
浮动元素会具有行内块元素特性(如果行内元素有了浮动,则不需要转换块级\行内元素就可以直接给高度和宽度)
任何元素都可以浮动。不管原先是什么模式的元素,添加浮动之后就具有行内块元素相似的特性。
如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定。
浮动的盒子中间是没有缝隙的,是紧挨在一起的
行内元素同理
网页布局第二准则:先设置盒子大小,之后设置盒子的位置
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。
为什么需要清除浮动:由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为0时,就会影响下面的标准流盒子。
清除浮动的本质:清除浮动元素造成的影响
清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了。
选择器{clear:属性值;}
left (清除左侧浮动的影响)
right(清除右侧浮动的影响)
both(同时清除左右两侧浮动的影响)
清除浮动的策略是:闭合浮动
清除浮动方法:
1.额外标签法
2.父级添加overflow属性
overflow:hidden
3.父级添加after伪元素
.clearfix:after {
content:"";
display:block;
height: 0;
clear:both;
visbility:hidden;
}
.clearfix {/IE6、7专有/ *zoom:1;
}
4.父级添加双伪元素
.clearfix:before,.clear:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix{
*zoom:1;
}