css的浮动属性

css浮动

概述

网页中有很多布局效果，标准流没有办法完成，使用可以利用浮动改变元素默认的排列方式，举例说明（如网页中横向排列的模块或者一左一右排列的模块）。

1、浮动的概念

浮动可以使元素【脱离文档流】，【按照指定方向排列】，直到遇到父元素的边界或另一个浮动元素【停止】。

2、浮动属性

• float

  • left 左浮动

  • right 右浮动

  • float:none 不浮动(默认值)

3、浮动的基本特性

• 可以使块元素在一行排列

• 脱离文档流

• 提升层级

.4、浮动的问题（为什么要清浮动）

• 子元素浮动导致父元素高度塌陷

• 影响之后元素的布局

• 父元素固定高度法

  • 描述：给浮动元素的父元素固定高度

  • 缺点：不够灵活

  • 代码演示

• 父元素overflow方法

  • 描述：给父元素加 overflow 属性，overflow 为 visible 以外的其它值时可以帮助实现

  • 缺点：可能会隐藏内容或触发不需要的滚动条

• 额外标签法

  • 描述：在浮动元素的最后加一个空块元素，此元素本身不浮动，且添加样式clear:both

  • clear属性说明

    • 作用：清除浮动

    • 取值

      • left

      • both

      • right

        提示通常使用both!

  • 缺点：代码冗余，影响代码可读性

• 伪元素:after

  • 描述：给浮动标签的父标签添加

     .clearfix:after{
           content:"";
           display:block;
           clear:both;
    }

  • 优点：内容适应性强，不会在结构上产生冗余代码，可多次重复使用

  • 作为通用代码总结