CSS系列 (05)：浮动详解

2022-07-15 11:32:38

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 —— W3C

文字环绕

float可以实现块级元素的文本环绕浮动元素的布局

<div class="left">左浮动</div>

<div class="right">右浮动</div>

<div class="no-float">

  我是块级元素，我不浮动。我是块级元素，我不浮动。我是块级元素，我不浮动。我是块级元素，我不浮动。我是块级元素，我不浮动。我是块级元素，我不浮动。我是块级元素，我不浮动。我是块级元素，我不浮动

</div>

小贴士：

行内块(inline-block)元素的文本无法实现文字环绕布局，直接不行
行内(inline)元素的文本虽然可以实现文字环绕布局，但是不建议使用，其背景色不会铺满，如下图

布局

浮动元素总是找离它最近的父级元素对齐，但是不会超出内边距的范围

CSS系列 (05)：浮动详解

<div class="container">

  <div class="item right">右浮动</div>

  <div class="item el-block">不浮动-块级元素</div>

  <div class="item el-block">不浮动-块级元素</div>

</div>

浮动元素脱离标准流，会将后面标准流中的块级元素覆盖【但不会覆盖普通流中的行内元素和行内块元素，它们将会和浮动元素并排显示】

CSS系列 (05)：浮动详解

<div class="container">

  <div class="item el-block">不浮动-块级元素</div>

  <div class="item left">左浮动</div>

  <div class="item el-block">不浮动-块级元素</div>

</div>

浮动元素的排列位置，跟上一个元素有关系。如果上一个元素是标准流中的块级元素，则浮动元素的顶部会和上一个元素的底部对齐；如果上一个元素是标准流中的行内块元素或者行内元素，则浮动元素顶部会和上一个元素的顶部对齐，且会浮动到最左或最右侧；如果上一个元素有浮动，则浮动元素顶部会和上一个元素的顶部对齐；
```
<div class="container">

  <div class="item el-block">不浮动-块级元素</div>

  <div class="item left">左浮动</div>

</div>

<div class="container">

  <div class="item el-inline-block">不浮动-行内块元素</div>

  <div class="item left">左浮动</div>

</div>

<div class="container">

  <div class="item left">左浮动-1</div>

  <div class="item left">左浮动-2</div>

</div>
```
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”
```
<div class="container">

  <div class="item left lg">左浮动-1</div>

  <div class="item left">左浮动-2</div>

  <div class="item left">左浮动-3</div>

</div>
```

清除浮动

清除浮动主要为了解决父级元素因为子级元素浮动引起内部高度为0的问题

方法：

触发浮动元素的父元素BFC，BFC详见CSS系列 (04)：盒模型详解

父容器添加属性：overflow:hidden
after伪元素 +clear属性

在浮动元素后增加一个任意DOM元素，并设置css属性 clear: both，即可清除浮动。but，这样会添加一些无语义的DOM元素，不利于后期维护。

聪明的你可能会想到after伪元素，利用CSS在元素内部的结束位创建一个元素，简直棒呆

注意：新创建的元素为行内元素，且必须要结合content属性使用
```
.clearfix:after {

  content: '.';

  display: block;

  clear: both;

  width: 0px;

  height: 0px;

  visibility: hidden;

}

/* 兼容IE6、IE7，使用 zoom:1触发 hasLayout */

.clearfix {

  zoom: 1;

}
```

码农公寓

文字环绕

布局

清除浮动

相关文章