CSS Float布局过程与老生常谈的三栏布局

CSS Float布局

什么是Float

Float，即浮动，是CSS中一种布局方式。当该元素被设置为float元素时，它将元素从文档流中脱离出来，然后左右移动，直到遇到其容器的边界或另一个float元素为止。

Float的语法

.float-object {
    float: left | right | none | inherit;
}

float属性可取以下值：

• left：元素向左浮动。
• right：元素向右浮动。
• none：不浮动任何方向。
• inherit：继承父元素的float属性。

Float布局的优缺点

优点

• 可以实现元素的浮动，从而实现多列布局。
• 可以配合text-wrap属性实现图文混排布局。

缺点

• 不能实现高度自适应，只有在一定高度内对列数进行限制才能保持相对稳定。
• 不利于响应式布局。
• float元素脱离了文档流，对其他元素的布局有影响。

浮动元素的清除

想要取消元素浮动的影响，可以在浮动元素的后面添加一个空的元素并给该元素添加如下样式：

.clearfix {
    clear: both;
}

三栏布局示例

三栏布局是一种常见的布局方式，在此进行说明。

方法一：浮动布局

html代码：

<div class="container">
  <div class="left-box">左侧</div>
  <div class="center-box">中间</div>
  <div class="right-box">右侧</div>
  <div class="clearfix"></div>
</div>

css代码：

.container {
  width: 800px;
  margin: 0 auto;
}

.left-box {
  width: 200px;
  height: 300px;
  background: lightblue;
  float: left;
}

.center-box {
  width: 400px;
  height: 300px;
  background: pink;
  margin: 0 10px;
  float: left;
}

.right-box {
  width: 200px;
  height: 300px;
  background: lightgreen;
  float: left;
}

.clearfix {
    clear: both;
}

方法二：flex布局

html代码：

<div class="container2">
  <div class="left-box2">左侧</div>
  <div class="center-box2">中间</div>
  <div class="right-box2">右侧</div>
</div>

css代码：

.container2 {
  display: flex;
  justify-content: space-between;
  width: 800px;
  margin: 0 auto;
}

.left-box2 {
  width: 200px;
  height: 300px;
  background: lightblue;
}

.center-box2 {
  width: 400px;
  height: 300px;
  background: pink;
  margin: 0 10px;
}

.right-box2 {
  width: 200px;
  height: 300px;
  background: lightgreen;
}

在这个示例中，我们使用了flex布局，将container2元素设置为flex容器。使用justify-content属性实现了左中右三个元素均分容器的宽度，并且中间的元素有20px的margin。flex布局具有高度自适应、易于实现响应式布局等优点，比传统的float布局更加强大和灵活。

以上是CSS Float布局过程与老生常谈的三栏布局的完整攻略，希望对您有所帮助。