CSS 常用样式浮动属性-CSDN博客

二、浮动的性质

CSS 中的浮动是一种布局方式常用于实现图片或者文本环绕效果。它的属性值包括 left、right、none 和 inherit。

下面是浮动的具体性质

1. 浮动元素会脱离文档流不再占据原来的位置。这意味着其他元素会尝试占据浮动元素的位置。

2. 浮动元素会向左或向右移动直到它的外边缘碰到包含它的容器边缘或者另一个浮动元素的边缘。

3. 浮动元素可以和其他元素重叠。

4. 包含浮动元素的容器高度无法被浮动元素撑起需要使用 clear 属性清除浮动元素对容器的影响。

下面是一个浮动元素的示例

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box float">Box 3</div>
  <div class="box">Box 4</div>
</div>

.container {
  width: 500px;
  height: 500px;
  background-color: #ccc;
}

.box {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #fff;
  float: left;
}

.float {
  float: right;
}

在这个例子中Box 3 使用了 float: right 属性所以它会向右浮动。它的外边缘碰到了容器的右边缘所以停止了移动。由于 Box 3 浮动了容器的高度无法被撑起需要使用 clear 属性清除浮动元素对容器的影响代码如下

.container::after {
  content: "";
  display: block;
  clear: both;
}

参考链接

• MDN Web 文档浮动

三、浮动的问题

CSS浮动是一种常用的布局方式它可以使网页中的元素沿着指定的方向浮动从而实现复杂的页面布局。但是浮动也会带来一些问题比如元素高度塌陷、浮动元素重叠等。接下来将详细解析这些问题并提供相应的代码实例。

问题1元素高度塌陷

当一个浮动元素后面没有其他元素或者该元素的父元素没有设置高度时该元素的高度会塌陷导致后面的元素布局异常。这是因为浮动元素脱离了文档流不能撑开父元素的高度。

解决方法

1.设置父元素的高度可以通过设置固定值或者使用min-height。

<div class="parent" style="min-height: 200px;">
  <div class="float">浮动元素</div>
  <div>后面的元素</div>
</div>

2.在浮动元素后面添加一个空的块元素并设置clear属性这个元素会撑开父元素高度。

<div class="parent">
  <div class="float">浮动元素</div>
  <div class="clear"></div>
  <div>后面的元素</div>
</div>

<style>
.clear {
  clear: both;
}
</style>

问题2浮动元素重叠

当多个浮动元素在同一行宽度之和超过父元素宽度时后面的浮动元素会被挤到下一行。

解决方法

1.使用flex布局可以自动调整浮动元素的位置。

<div class="parent" style="display: flex; flex-wrap: wrap;">
  <div class="float">浮动元素1</div>
  <div class="float">浮动元素2</div>
  <div class="float">浮动元素3</div>
  <div class="float">浮动元素4</div>
  <div class="float">浮动元素5</div>
</div>

2.设置浮动元素的宽度为百分比使浮动元素自适应父元素宽度。

<div class="parent">
  <div class="float" style="width: 20%;">浮动元素1</div>
  <div class="float" style="width: 20%;">浮动元素2</div>
  <div class="float" style="width: 20%;">浮动元素3</div>
  <div class="float" style="width: 20%;">浮动元素4</div>
  <div class="float" style="width: 20%;">浮动元素5</div>
</div>

问题3父元素无法包含浮动元素

当父元素的高度为0时浮动元素会溢出父元素导致布局出现问题。

解决方法

1.使用overflow属性父元素设置为auto、hidden或scroll可以使父元素包含浮动元素。

<div class="parent" style="overflow: auto;">
  <div class="float">浮动元素</div>
</div>

2.使用clearfix方法给父元素添加一个clearfix类该类包含一个clearfix伪元素在父元素内部产生一个清除浮动的效果。

<div class="parent clearfix">
  <div class="float">浮动元素</div>
</div>

<style>
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
</style>

以上就是CSS浮动的问题及相应的解决方法通过这些方法可以避免浮动带来的问题实现更加复杂且美观的页面布局。

四、清除浮动方法

浮动float是 CSS 中很常用的属性它可以让元素像浮动在文档流的上面达到排版和布局的目的。但是浮动元素可能会影响到其他元素的布局导致布局混乱。

为了解决浮动元素带来的布局问题可以使用清除浮动clear float的方法。常见的清除浮动方法有以下几种

1. 使用清除浮动的伪类after

在浮动元素的父元素上使用 :after 伪类并给它设置 content: "."; display: block; height: 0; clear:both; visibility: hidden;可以清除浮动导致的父元素高度塌陷问题。代码实现如下

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear:both;
  visibility: hidden;
}

在 HTML 中只需要在浮动元素的父元素上添加 clearfix 类名即可。

<div class="clearfix">
  <div class="float-left"></div>
  <div class="float-left"></div>
</div>

1. 使用 overflow 属性清除浮动

在浮动元素的父元素上设置 overflow: auto; 或 overflow: hidden;可以清除浮动导致的父元素高度塌陷问题。代码实现如下

.parent {
  overflow: auto;
}

1. 使用 display 属性清除浮动

在浮动元素的父元素上设置 display: table; 或 display: table-cell;可以清除浮动导致的父元素高度塌陷问题。代码实现如下

.parent {
  display: table;
}

1. 使用双伪元素清除浮动

在浮动元素的父元素上使用双伪元素:before 和 :after清除浮动可以清除浮动导致的父元素高度塌陷问题。代码实现如下

.parent:before,
.parent:after {
  content: "";
  display: table;
}
.parent:after {
  clear:both;
}

需要注意的是使用浮动布局时应该在需要浮动的元素后面添加清除浮动的元素保证布局的正确性。