Skip to content

浮动,清除浮动 #21

Open
Open
@conan1992

Description

@conan1992

定义:

float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除,尽管仍然保持部分的流动性(与绝对定位相反)。

优点:可以设置横向排序方向,浮动元素可以设置宽高,可以使文字和内联元素环绕;

缺点:脱离文档流,使得父级的高度塌陷;

清除浮动的方法

  • 父级添加overflow属性,或者设置高度
  • 添加额外标签
<div class="parent">
    //添加额外标签并且添加clear属性
    <div style="clear:both"></div>
    //也可以加一个br标签
</div>
  • 伪类元素
.clear:after{
 /* 设置添加子元素的内容是空 */
      content: '';  
      /* 设置添加子元素为块级元素 */
      display: block;
      /* 设置添加的子元素的高度0 */
      height: 0;
      /* 设置添加子元素看不见 */
      visibility: hidden;
      /* 设置clear:both */
      clear: both;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions