CSS 学习笔记（一）浮动布局

发表于 | 分类于

关于 CSS 的知识中，布局是一个很重要的组成部分。布局方法有很多种，这其中的浮动布局能够实现一些很好的布局效果，于此同时， CSS 中的浮动属性也让人很伤脑筋，学习过程中比较难理解，我准备在这篇博客中把我学到的有关于浮动属性与浮动布局的知识都记下来，以备后用。

这是一篇很简洁的文章，限于时间与精力，暂时不会写的很详细，等以后有时间再回头补充一下。

两侧自适应的流体浮动布局

两侧自适应是指左右两栏都可以根据自身宽度来改变其内容的显示方式，实现方式是：

1.左边一栏设置左浮动，同时设置适当的右外边距与右边一栏隔开；
2.右边一栏设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
3.左右两栏的父元素设置 overflow 属性为 auto。

需要注意的是，当右侧一栏中的文字为英文时，如果一个英文单词太长，则会导致换行效果出现，这时可以使用```word-wrap: break-word```和```word-break: break-all```这两个 CSS 属性使长单词换行显示。

### 右侧尺寸固定的流体浮动布局

顾名思义，该布局的右侧一栏尺寸固定，左侧自适应，实现方式有两种，第一种是：

1.尺寸固定的一栏设置右浮动，同时设置适当的左外边距与另外一栏隔开。

这种方式设置起来很简单，但是有一个问题，就是 html 代码中处于前面的元素在被浏览器渲染以后出现在了 html 代码中处于后面的元素的右侧，这与常规情况恰好相反，我们可以通过下面这种实现方式来规避这个问题：

1.尺寸不固定的一栏设置左浮动，右外边距设置为尺寸固定一栏的宽度加想设置的两栏之间的间距；
2.尺寸固定的一栏同样设置左浮动，同时设置一个负值的左外边距，其绝对值与自身宽度相同；

### 清除浮动的方式

清除浮动的方式有如下几种：

1.设置其父元素的 overflow 属性为 auto 或者 hidden，推荐使用这种做法。
2.为其父元素设置伪类，例如
``` html
<style type="text/css">
  .clearfix:after {
    content: "";
    display: block;
    clear: both;
  }
</style>
<!-- 将伪类添加到父元素上 -->
<div class="clearfix">
  <div style="float:left">浮动内容</div>
</div>

3.在浮动元素的后面添加一个清除浮动的空元素，例如

1
<div style="clear:both;"></div>。

这种方法不推荐使用，因为会引入不必要的空元素。