float?

浮动

浮动的应用场景,如果想让块级元素在一行显示,我们就可以用浮动

浮动的几个值?

• float:left
• float:right
• float:none

浮动的特点?

1. 脱离文档流(不占位)
2. 浮动元素的左右浮动是参照父级的
3. 浮动元素如果不设置宽度的时候,它不再继承父级,而是根据自身内容的大小(在普通文档流中,宽度是可以继承的,但是在浮动中特例)
4. 造成了父级的"盒子塌陷"(父级没有了高度,因为子盒子脱离了文档流)

面试题:如何解决浮动造成的盒子塌陷问题?

1. 给父盒子增加高度
2. 给父盒子加overflow:hidden;
3. clear:both(清除左右的浮动),要在父级的末尾加一个div,用来清除左右的浮动;clear:left(清除左浮动),clear:right(清除右浮动),clear:both(清除左右浮动),伪类本质上和第三个是一样可以清浮动的(把clear:both加到.clearfix:after{clear:both放在这个里面}),只是为了在做项目的时候更加的方便,不用手动在浮动盒子的父级末尾加div
4. .clearfix清浮动(工作中常用),只要子盒子有浮动,就立马给它的父盒子添加类名
5. 浮动的本质,可以实现图文混编,如果有图片,有文字的时候,我们给图片设置浮动,然后文字就会自动的挨着图片进行环绕排列

总结:注意:浮动,除了图文混编,咱们在做项目的时候,一般,如果给一个元素设置了浮动,那么它的兄弟元素通常都要设置,"就是说浮动了,就全浮动"

.clearfix:after{
    display:block;
    contetnt:"";
    visibility:hidden;
    height:0
    font-size:0;
    clear:both
}
  .clearfix{
    *zoom:1
}