浮动就是让咱们的元素脱离标准文档流,目的是为了布局好看!
浮动的现象:
-
脱离标准文档流被叫作脱流,同时会出现字围现象。
-
浮动的元素会相互贴靠,并且若是父容器空间足够大,则浮动的元素会正常紧靠也就是后一个元素会紧靠前一个元素。若是父容器空间不够大,那么元素会找上级的上级去紧靠,若是还找不到则继续找上级紧靠,没有了上级可靠那就靠边。
-
浮动的元素不分块级和行内类别,也就是说均可以设置宽高可边距。
-
浮动之后,同一行内的元素以顶边做为基线对齐。
为何浮动会带来影响??????
由于浮动元素不占父标签的高度内容,会致使父标签高度的减小,以及标准文档流光标的上移css
解决的核心入手点?
(1)固定父标签高度 (2)固定光标位置布局
清楚的方法
(1)父标签设置高度
好处:两个核心点都解决了
坏处:一。咱们之后不多给div固定死高度 二。不容易计算高度spa
(2)内墙法 clearboth
是加到不想上移的标签身上
坏处:不会增长因浮动致使缩小高度的标签增长高度文档
(3)overflowit
主业:超出隐藏部分
副业:帮助本标签清除浮动带来的影响table
(4
)
第四种:使用伪元素的方式,:after、:before
-
使用方法:
.clearfix:after{
content:"", 这是伪元素添加的内容
display:block,
clear:both, 清除浮动
height:0,
visibility:hidden 不显示出来
}
.clearfix{
*zoom:1;为了兼容IE六、7
}
使用方法:
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /*IE/7/6*/
}
区别伪类与伪元素:
伪类::link :visited :hover :active love hate 注意:咱们在使用时必定要遵照lvha原则
:focus :first-child :last-child等等
伪元素::after :before :first-line :first-letter
伪类:用于给某一个元素修改css属性,能够当作是给该元素添加了一个类选择器样式
伪元素:用于给某个元素添加内容及css属性样式,能够当作是在该元素内又加了一个元素