浮动流
浮动流脱标
1.什么是浮动元素的脱标?
脱标:脱离标准流
当某一个元素脱标以后,那么这个元素看上去就像被从标准流中删除了一样,这个就是浮动元素的脱标
2.浮动元素脱标之后会有什么影响?
如果前面一个元素浮动了,而后面一个元素没有浮动,
那么这个时候前面的一个元素就会盖住后面的一个元素
浮动元素排序规则
1.浮动元素排序规则
1.1相同方向上的浮动元素,先浮动的元素会显示在前面,后浮动的元素会显示在后面
1.2不同方向上的浮动元素,左浮动就会找左浮动,右浮动会找右浮动
1.3浮动元素浮动之后的位置,由浮动元素浮动之前在标准流中的位置来确定
浮动元素的贴靠现象
1.如果父元素的宽度足够显示所有浮动元素,
那么浮动的元素就会并排显示
2.如果父元素的宽度不能显示所有浮动元素,
那么会从最后一个元素开始往前贴靠
3.如果贴靠了前面所有浮动元素之后都不能显示,
最终会贴靠到父元素的左边或者右边
浮动元素高度问题及清除浮动方式
1.在标准流中内容的高度可以撑起父元素的高度
2.在浮动流中,浮动的元素是不可以撑起父元素的高度的
1.清除浮动的方式一
给前面一个父级元素设置高度
注意点:
在企业开发中,我们能不写高度就不写高度,
所以这种方式用的很少
2.清除浮动元素方式二
给后面的盒子添加clear属性
clear属性取值:
none:默认取值,按照浮动元素的排序规则来排序
left:就是告诉浏览器当前的浮动元素不要找前面的左浮动元素
right:不要找前面的右浮动元素
both:不要找前面的左浮动元素和右浮动元素(企业开发中一般都使用这个属性)
注意点:
当我们给某个元素添加clear属性之后,那么这个属性的margin属性就会失效
3.清除浮动元素方式三(隔墙法)
3.1外墙法
在两个盒子中间添加一个额外的块级元素
给这个额外添加的块级元素设置clear:both;属性
注意点:
外墙法可以让第二个盒子使用margin-top属性
但是第一个盒子无法使用margin-bottom属性
3.2内墙法
在第一个盒子中所有子元素最后添加一个额外的块级元素
给这个额外添加的块级元素设置clear:both;属性
注意点:
内墙法可以让第二个盒子使用margin-top属性
而且第一个盒子也可以使用margin-bottom属性
3.3两者之间的区别
外墙法不能撑起第一个盒子的高度,而内墙法可以撑起第一个盒子的高度
在企业开发中基本不使用这个隔墙法方式来清除浮动元素
4.清除浮动的方式四(伪元素选择器法)
通过伪元素选择器为第一个盒子添加子元素,这样就和内墙法的原理相同,企业开发一般使用这个方法
.box1::after{
/*设置添加的子元素内容为空*/
content: '';
/*设置添加的子元素为块级元素*/
display: block;
/*设置添加的子元素的高度为0px*/
height: 0;
/*设置添加的子元素看不见*/
visibility: hidden;
/*给添加的子元素设置clear:both;*/
clear: both;
}
.box1{
/*兼容ie6浏览器*/
*zoom: 1;
}
注意点:
IE6中不支持这种方式,为了兼容IE6必须给前面盒子添加*zoom:1;属性
什么是伪元素选择器?
伪元素选择器作用就是给指定标签的内容前面添加一个子元素
或者给指定标签的内容后面添加一个子元素
格式:
div::before{
属性: 值;
}
给指定标签前面添加子元素
div::after{
属性: 值;
}
给指定标签后面添加子元素
例如:
content:"么么哒"; == 指定添加的子元素中存储的内容
visibility:hidden; == 隐藏添加的子元素
5.清除浮动的方式五
1.overflow:hidden;作用
1.1可以将超出标签范围的内容裁剪掉
1.2清除浮动,给第一个盒子添加overflow:hidden;属性即可
注意点:IE6中不支持这种方式,为了兼容IE6必须给前面盒子添加*zoom:1;属性
1.3可以通过overflow:hidden;属性让里面的盒子设置margin-top之后,外面的盒子不被顶下来