一、三种传统布局方式:
普通流(标准流)根据标签特性从上到下排列
浮动(改变元素标签默认的排列方式)
定位
二、float 创建浮动框
float: left/right;
特性:
1.离标准流的控制(浮)移动到指定位置(动):脱标
2.浮动的盒子不会保留原先的位置(“飘”起来了)
3.如果多个盒子设置了浮动,则按照属性值一行内显示并且顶端对齐排列
4.浮动元素具有行内块特性
5.任何元素都可以浮动
6.如果块级盒子没有设置宽高,默认与父级100%,但添加浮动后,宽随内容决定
7.浮动的盒子中间没有间隙
8.浮动元素不会盖住文字,文字会自动环绕在浮动元素周围
9.不能使用(margin: auto)
居中,用定位控制,让一个浮动元素居中,在外套一个同样大小的div
**网页布局策略:**先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
**注意:**一个盒子中有多个子盒子,其中一个盒子浮动,其他兄弟也应该浮动。浮动的盒子不影响前面的标准流只影响后面的标准流。
三、清除浮动
当父盒子没有设置高度,子元素浮动,会造成塌陷
1、父级添加overflow:hidden;
2、额外标签法:在浮动元素末尾添加一个空标签(必须是块级元素)
<div style="clear:both/left/right"></div>
3、父级加伪元素
div::after {content:""; display:table;clear:both;}
既解决外边距重合问题,又清除浮动
.one::before,.one::after {content:""; display: table; clear: both;}
四、显示隐藏
不占位置:
display:none; //隐藏元素
display: block ; //显示被隐藏元素
opacity : 0-1 ; //控制透明度 但是会占位置