浮动布局与清除浮动：CSS实战指南-优快云博客

浮动目录

前言
一、浮动的作用
二、float 的可选值
三、浮动的特点
四、浮动的影响
- 1.浮动会带来高度塌陷的问题
- 2.浮动元素变成了行内块级元素
五、清除浮动
总结

前言

网页是标准文档流：浏览器中网页的各个元素默认排列的方式：从上到下，从左到右。但有时想将块元素水平排列，怎么办呢？下面的文章将会介绍。

一、浮动的作用

可以使用float属性来设置元素的移动，让页面块元素水平排列；通过浮动制作一些水平方向布局。

二、float 的可选值

1.none

默认值，元素不浮动

2.left

元素向左浮动

3.right

元素向右浮动

三、浮动的特点

1.浮动元素会脱离文档流，不再占据文档流中的位置。
2.设置浮动后，元素会向父元素的左侧或右侧移动。
3.浮动元素默认不会从父元素中移出。
4.浮动元素向左或向右移动时不会超过它前边的其他浮动元素。
5.若浮动元素上面是一个没有浮动的块元素，则浮动元素无法上移。

注意：浮动的元素不能通过text-align:center或者margin:0 auto 设置水平居中。

四、浮动的影响

1.浮动会带来高度塌陷的问题

在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，会完全脱离文档流，此时将无法撑起父元素的高度，导致父元素高度丢失。

2.浮动元素变成了行内块级元素

浮动的元素在一行显示，可以设置宽高

代码如下（示例）：

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</body>

 <style>
    * {
      padding: 0;
      margin: 0;
    }
    ul {
     /* 高度撑不起来 */
      border: 2px blue solid;
    }
    ul li {
      list-style: none;
      /* 设置浮动 */
      float: left; 
      background-color: pink;
     /* 块级元素变成行内块级元素，一行显示，可以设置宽高 */
      width: 200px;
      height: 200px;
      margin-right: 20px;
    }
  </style>

增加浮动效果图：

五、清除浮动

1.直接给父元素设置高度

优点：简单粗暴，方便。
缺点：有些布局中不能固定父元素高度。如：新闻列表。

代码如下（示例）：

ul {
      border: 2px blue solid;
      /* 清除浮动方法1：给父元素设置高度 */
      height: 200px;
    }

2.额外标签法（不推荐）

给父元素添加一个最小的块级子元素，给儿子设置 clear：both
缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂。

3.给父元素设置overflow : hidden

代码如下（示例）：

 ul {
      border: 2px blue solid;
      /* 清除浮动方法3：overflow : hidden  */
      overflow: hidden;
    }

4.伪元素清除法（常用）

4.1单伪元素清除法

代码如下（示例）：

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

4.2双伪元素清除法

代码如下（示例）：

.clearfix:before,
.clearfix::after{ 
content: ' ';
display: block;
clear:both;
}

4.3单伪元素清除法完整代码

<body>
  <ul class="clearfix">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</body>

<style>
    * {
      padding: 0;
      margin: 0;
    }

    /* 清除浮动方法4：伪元素清除法  */
    .clearfix::after {
      content: ' ';
      display: block;
      clear: both;
    }

    ul {
      border: 2px blue solid;
    }

    ul li {
      list-style: none;
      /* 设置浮动 */
      float: left;
      background-color: pink;
      margin-bottom: 10px;
      /* 块级元素变成行内块级元素，一行显示，可以设置宽高 */
      width: 200px;
      height: 200px;
      margin-right: 20px;
    }
  </style>