CSS——如何清除float浮动

float浮动现象:
  脱离文档流,延迟父容器靠左或靠右进行排列。
  float:right / left / none
  注意点:
    (1)只会影响后面的元素
    (2)内容默认提升半层
    (3)默认宽根据内容决定
    (4)换行排列
    (5)主要给块元素添加,但也可以给内联元素添加
如何清除浮动:
  一、上下排列时:

      采用clear属性,表示清除浮动的

        clear:left / right / both
  二、嵌套排列:
    (1)固定宽高:不推荐,不能把高度固定死,不适合做自适应的效果
    (2)父元素浮动:不推荐,因为父容器浮动也会影响到后面的元素
    (3)overflow:hidden;(BFC规范),如果有子元素想溢出那么会受到影响
    (4)display:inline-block(BFC规范),不推荐,父容器会影响到后面的元素
    (5)设置空标签:不推荐,会添加一个标签
    (6)after伪类:推荐,是空标签的加强版,目前各大公司这样做  .clear:after{content:"";clear:both;display:block;}

 

posted @ 2021-02-07 09:58  泰初  阅读(118)  评论(0编辑  收藏  举报