css 浮动(float)页面布局(下)-前端开发

下面是关于“CSS 浮动(float)页面布局”的完整攻略：

下面是关于“CSS 浮动(float)页面布局”的完整攻略：

浮动(position: float)介绍

浮动是一种布局方式，可以让元素向左或向右移动，这样它就可以与其他元素并排排列。在CSS中，可以使用float属性来实现浮动。浮动元素将被移动到其容器的左侧或右侧，并且该元素在页面渲染中存在一定的流动性。

浮动的优缺点

优点

灵活性：浮动元素可以让我们实现各种页面布局效果，比如悬浮框、图片展示等
自适应性：浮动元素可以自适应容器的大小，对移动端页面有较好的适应性

缺点

元素脱离文档流：浮动元素不再遵循元素垂直排列的规则，会对后面的元素造成影响，需要消除浮动。
不同浏览器的兼容性问题：不同浏览器可能会对浮动属性产生不同的解析结果，需要进行兼容测试。
高度塌陷问题：浮动元素的容器高度无法自适应，需要进行清空浮动。

浮动相关属性

在CSS中，有许多与浮动相关的属性，包括：

float: 浮动方向，取值为left、right、none
clear: 清除浮动，取值为left、right、both、none
display: 元素显示方式，可取值为inline、block、inline-block等
overflow: 溢出处理方式，可取值为auto、hidden、scroll、visible等

使用浮动布局

下面，我们来看两个例子：

例子1：两栏自适应布局

这是一个简单的两栏自适应布局，左侧固定宽度，右侧自适应宽度。

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

.container{
  width: 100%;
  overflow: hidden;
}
.left{
  float: left;
  width: 200px;
  height: 200px;
  background: #ccc;
}
.right{
  margin-left: 200px;
  height: 200px;
  background: #999;
}

通过上述代码，我们利用 float:left 实现了左侧栏固定宽度，并让右侧栏自适应的效果，而通过 margin-left: 200px 使得右侧栏跨过左侧栏，达到效果。

例子2：文字环绕图片

这是一个文字环绕图片的布局，让一张图片浮动，文字围绕图片排列的布局。

<div class="container">
  <img src="image.jpg" alt="">
  <p>这是一段内容，让其围绕图片排列</p>
</div>

.container{
  width: 500px;
  overflow: hidden;
}
img{
  float: left;
  margin-right: 10px;
  width: 200px;
  height: auto;
}
p{
  line-height: 24px;
}

通过上述代码，我们利用 float:left 实现图片浮动，并通过 margin-right:10px 控制图片和文字的距离，使得文字呈现环绕图片的效果。