【28】CSS核心样式（6）——浮动属性（下）

倏存

已于 2022-07-12 21:42:02 修改

阅读量362

点赞数 3

分类专栏：前端基础文章标签： html css 原力计划

于 2021-04-06 11:31:21 首次发布

本文链接：https://blog.csdn.net/weixin_47640160/article/details/115408554

版权

前端基础专栏收录该内容

79 篇文章 7 订阅

订阅专栏

本文详细探讨了浮动在布局中的问题，如子元素撑高父元素、影响标准流位置等，并介绍了多种清除浮动的方法，包括height、clear属性、内外墙法、伪类和overflow属性的使用。每个方法优缺点及适用场景都有所阐述。

摘要由CSDN通过智能技术生成

浮动是我们学习的第一种脱离标准流的方式。
继续上篇，本篇讲解• 浮动的问题 • 清除浮动方法
在这里插入图片描述

一、浮动的问题

1.浮动的子元素是撑不高标准流父元素

标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高。如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>浮动的问题1.浮动的子元素是撑不高标准流父元素</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box {
      width: 500px;
      border: 10px solid #f00;
    }
    .box p {
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 10px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="box">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>
</html>

在这里插入图片描述

2 .影响标准流位置、影响贴边效果

父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>浮动的问题2.影响标准流位置、影响贴边效果</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box1 {
      width: 500px;
      border: 10px solid #f00;
    }
    .box1 p {
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 10px;
      background-color: skyblue;
    }
    .box2 {
      width: 500px;
      border: 10px solid #00f;
    }
    .box2 p {
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 10px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box1">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
  <div class="box2">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>
</html>

在这里插入图片描述

以上的问题需要被解决，解决方法是清除浮动带来的影响。

二、清除浮动

1.height ，给标准流的父元素强制给一个合适的高度：

（不做举例，可以参考前面的代码，给父元素加一个合适的高度，变化子元素的高度）
解决了：父元素有了高度，前面的浮动不能影响后面元素的标准流位置和贴边。
仍存在问题：父元素高度不是自适应，一旦子元素高度变化，问题可能再次出现。

2.clear属性

作用：清除标签元素自身受到的前面的浮动元素的影响。
属性值：left 清除前面左浮动带来的影响;
属性值： right 清除前面右浮动带来的影响 ;
属性值：both 清除前面所有浮动带来的影响.
给标准流父元素添加 clear 属性，父元素不受前面浮动影响，不会再占有浮动让出的位置。
解决了：浮动问题的第2点：浮动元素影响后面元素标准流位置和贴边。
仍存在问题：父元素不能高度自适应，两个父元素之间如果有margin效果不正确。（不做举例，可以参考以下的代码，给父元素加一个margin，看看显示效果）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>清除浮动2.clear属性</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box1 {
      width: 500px;
      border: 10px solid #f00;

      clear: both;
    }
    .box1 p {
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 10px;
      background-color: skyblue;
    }
    .box2 {
      width: 500px;
      border: 10px solid #00f;
      clear: both;
    }
    .box2 p {
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 10px;
      background-color: pink;

    }
  </style>
</head>
<body>
  <div class="box1">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
  <div class="box2">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>
</html>

在这里插入图片描述

3.隔墙法

外墙法：

在两个大的父盒子之间，添加一个空的<div> 标签，标签上带有 clear： both 属性。
解决了：浮动影响后面元素标准流位置和贴边，模拟父元素间的距离。
仍存在问题：父元素没有高度自适应。（问题同上）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>清除浮动3.外墙法</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box1 {
      width: 500px;
      border: 10px solid #f00;
    }
    .box1 p {
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 10px;
      background-color: skyblue;
    }
    .boxwaiqiang {
      clear: both;
    }
    .box2 {
      width: 500px;
      border: 10px solid #00f;
    }
    .box2 p {
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 10px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box1">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
  <div class="boxwaiqiang"></div>
  <div class="box2">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>
</html>

在这里插入图片描述

内墙法：

在父元素内部，所有的浮动子元素后面添加一个空的 <div> 元素，标签高度为 0 ，添加 clear 属性。
解决：父元素高度自适应，浮动影响后面的元素位置和贴边。
缺点：浮动是css 样式属性带来的问题，内墙法使用 HTML 结构去辅助解决问题，如果页面中浮动元素很多，需要添加多个没有语义的空标签，造成 HTML 结构的冗余。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>清除浮动3.内墙法</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box1 {
      width: 500px;
      border: 10px solid #f00;
    }
    .box1 p {
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 10px;
      background-color: skyblue;
    }
    .NQ .boxneiqiang {
      height: 0;
      clear: both;
    }
    .box2 {
      width: 500px;
      border: 10px solid #00f;
    }
    .box2 p {
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 10px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box1 NQ">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <div class="boxneiqiang"></div>
  </div>
  <div class="box2 NQ">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <div class="boxneiqiang"></div>
  </div>
</body>
</html>

在这里插入图片描述

4.伪类

本质是使用伪类方法利用 css 代码书写一堵内墙。
伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。
:after ：这个伪类表示选中的是某个标签内部的最后的位置。
书写方法：前面必须加普通的选择器，后面连续书写伪类名称。
将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个 clearfix 的类名。
解决：父元素高度自适应，浮动影响后面的元素位置和贴边。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>清除浮动4.伪类</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box1 {
      width: 500px;
      border: 10px solid #f00;
    }
    .box1 p {
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 10px;
      background-color: skyblue;
    }
    .box2 {
      width: 500px;
      border: 10px solid #00f;
    }
    .box2 p {
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 10px;
      background-color: pink;
    }
     .clearfix:after {
      content: "1";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    } 
  </style>
</head>
<body>
  <div class="box1 clearfix">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
  <div class="box2 clearfix">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>
</html>

在这里插入图片描述

5.overflow：hidden；溢出隐藏(小偏方)

给内部有浮动子元素的父元素添加溢出隐藏小偏方overflow: hidden; 属性，可以解决浮动的所有问题。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>清除浮动5.overflow</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box1 {
      width: 500px;
      border: 10px solid #f00;
      overflow: hidden;
    }
    .box1 p {
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 10px;
      background-color: skyblue;
    }
    .box2 {
      width: 500px;
      border: 10px solid #00f;
      overflow: hidden;
    }
    .box2 p {
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 10px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box1">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
  <div class="box2">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>
</html>

在这里插入图片描述

补充：overflow 属性

元素高度设置后，overflow：hidden；效果是将超过高度的部分直接隐藏。
元素高度没有设置时，如果元素同时设置了overflow：hidden属性，元素会自适应内容的高度。(小偏方的原理）
高度自适应原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载。
浮动影响后面的元素：父元素有了高度后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边。

★总结:
如果父元素高度是固定的，建议使用 height 属性解决;
如果父元素高度需要自适应，建议使用 overflow 属性解决浮动问题。

下篇继续：【29】CSS核心样式（7）——认识 a标签的四个伪类选择器