CSS基础笔记九，浮动（如何处理浮动带来的堆叠和浮动影响其他元素）

凡梦_leo

已于 2024-07-11 00:06:28 修改

阅读量562

点赞数

分类专栏： CSS 文章标签： css 笔记前端 python mysql html5 css3

于 2023-06-28 14:06:14 首次发布

本文链接：https://blog.csdn.net/qq_55006020/article/details/131434965

版权

CSS 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

浮动的介绍：

1，浮动是通过增加一个浮动层级来放置内容。

2，浮动使元素脱离了文档流，浮动只有左右浮动，无上下浮动

3，浮动的开启：float：left/right

4，当多个文件浮动的时候，就会自动排列了，从左往右/从右往左

5，如果横向摆放，容器摆放不开，会自动换行

浮动优点和缺点。

浮动的优点，是可以让我们更加方便的去摆放一个容器内部的子容器，更加好的去设置他们的摆放位置。

缺点：

1，浮动会造成父级元素的塌方

2，后续的元素会受到浮动影响

先详细说一下浮动的基础知识和应用场景，在来详细解决浮动的缺点

2，解决浮动给后续元素带来的影响 clear：both

3，其他解决方案，综合起来一起解决overflow：hidden

一，浮动的开启

    .box div{
      width: 100px;
      height: 100px;
      background-color: #ffcccc;
      /*这个是把box这个容器直接漂浮起来了 所以下面的一层就直接顶到这个位置*/
      float: left;
    /*    如果向右浮动 就是right*/
    /*    这个也是镜像*/
    /*    float: right;*/
        margin: 10px;




身体部分

<div class="box">
    <div><p>box1</p></div>
    <div><p>box2</p></div>
    <div><p>box3</p></div>
    <div><p>box4</p></div>
    <div><p>box5</p></div>
    <div><p>box6</p></div>
    <div><p>box7</p></div>
    <div><p>box8</p></div>
    <div><p>box9</p></div>
    <div><p>box10</p></div>
    <div><p>box11</p></div>
    <div><p>box12</p></div>
    <div><p>box7</p></div>
    <div><p>box8</p></div>
    <div><p>box9</p></div>
    <div><p>box10</p></div>
    <div><p>box11</p></div>
    <div><p>box12</p></div>
</div>

二，浮动往左或者往右漂浮

      float: left;
    /*    如果向右浮动 就是right*/
    /*    这个也是镜像*/
    /*    float: right;*/

三，如果浮动横向摆放不开，就会默认换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
<!--  浮动，增加一个浮层来放置内容-->
<!--
浮动是使元素脱离了文档流
浮动只有左右浮动，没有上下浮动

浮动
float 定义元素往哪个方向浮动
left 往左浮动
right 往右浮动
多个文件的浮动的时候
当多个文件浮动的时候 就会自动排列了 从左往右或者从右往左

1.通过float属性定义
2，取值left right
3，浮动会脱离文档流
4，浮动元素默认横向摆放
5，如果横向摆放容器承载不开，会换行
-->
  <style>
    .box div{
      width: 100px;
      height: 100px;
      background-color: #ffcccc;
      /*这个是把box这个容器直接漂浮起来了 所以下面的一层就直接顶到这个位置*/
      float: left;
    /*    如果向右浮动 就是right*/
    /*    这个也是镜像*/
    /*    float: right;*/
        margin: 10px;
    }
    .t1{
      width: 100%;
      height: 200px;
      background-color: #2f0099;
    }
    p{
        margin: 0;
    }
    .t3 li{
        /*浮动在列表中的应用*/
        float: left;
        margin: 20px;
    }
  </style>
</head>
<body>
<div class="box">
    <div><p>box1</p></div>
    <div><p>box2</p></div>
    <div><p>box3</p></div>
    <div><p>box4</p></div>
    <div><p>box5</p></div>
    <div><p>box6</p></div>
    <div><p>box7</p></div>
    <div><p>box8</p></div>
    <div><p>box9</p></div>
    <div><p>box10</p></div>
    <div><p>box11</p></div>
    <div><p>box12</p></div>
    <div><p>box7</p></div>
    <div><p>box8</p></div>
    <div><p>box9</p></div>
    <div><p>box10</p></div>
    <div><p>box11</p></div>
    <div><p>box12</p></div>
</div>
<div class="t1"></div>
<div class="t3">
    <ul>
        <li>列表1</li>
        <li>列表1</li>
        <li>列表1</li>
        <li>列表1</li>
        <li>列表1</li>
    </ul>
</div>
</body>
</html>

解决浮动的缺点

1，解决浮动带来的父级元素塌方

原理，浮动带来的父级元素塌方，是因为一个容器里面的大小是依靠内容给其撑开的，当里面的内容浮动起来了之后，自然父级元素也就塌方了。

解决方案，最有效的一种方式是，给父级元素设置高度，让他自身的立起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动解决父级元素塌方方案</title>
  <style>
    .root{
      /*解决父级元素塌方方案 设置高度*/
      width: 100%;
      height: 360px;
      border: 5px solid red;
    }
    .box{
      width: 300px;
      height: 300px;
      background-color: yellowgreen;
      /*设置浮动 使之漂浮 出现父级元素塌方*/
      float: left;
      /*设置他们的外边距*/
      margin: 10px;
    }
  </style>

</head>
<body>
<div class="root">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
</body>
</html>

2，解决浮动给后续元素带来的影响 clear：both

原理：因为内容浮动起来，就会导致后续的内容被脱离文档流的浮动层给堆叠。

解决方案：元素被影响到了，那么就在被影响的元素里面添加清除浮动效果（clear：both）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动不影响其他元素的方案</title>
<!--
受影响的元素 设置清除浮动
clear
    both 清除浮动
-->
  <style>
    .box{
      width: 300px;
      height: 300px;
      background-color: #ffcccc;
      float: left;
      margin: 10px;
    }
    .box1{
      /*因为上面的容器设置了浮动，导致后续的容器被他们覆盖到下面去了*/
      width: 350px;
      height: 350px;
      background-color: #006699;
    /*  解决方案 清除浮动 不受到浮动影响*/
      clear: both;
    }
  </style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>

解决后：

3，其他解决方案，综合起来一起解决overflow：hidden

在父级元素里面设置 overflow：hidden 这个命令在属性篇有详细介绍

CSS基础笔记二，属性篇（字体属性，背景属性，文本属性，列表属性，表格属性，其他属性）_qq_55006020的博客-CSDN博客

简单来说就是，这个命令可以把超出部分给修剪掉，让其浮动的内容继续把父级元素给撑开，当然保险起见，还是要清除一下浮动 clear：both

代码：

    .root{
      border: 10px solid pink;
    /*  解决方案一，在父级元素里面清除浮动
    前提是父级元素不能设置高度*/
      /*overflow: hidden;*/
      /*clear: both;*/

还有综合起来的解决方案

在父级容器通过伪对象选择器在其后面添加内容

本来被堆叠了，但是我们通过给他后面添加内容，让其容器撑起来。把这个容器变成块级元素，全靠里面的内容，本来是隐藏了，但是我们让其显示出来，这样在清除掉浮动，就万无一失了。

.root:after{
    /*这是一套组合拳 代码直接拿过去用*/
    content: "";
    /*设置为块级元素*/
    display: block;
    clear: both;
}

凡梦_leo

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
CSS基础笔记九，浮动（如何处理浮动带来的堆叠和浮动影响其他元素）

浮动的介绍：1，浮动是通过增加一个浮动层级来放置内容。2，浮动使元素脱离了文档流，浮动只有左右浮动，无上下浮动3，浮动的开启：float：left/right4，当多个文件浮动的时候，就会自动排列了，从左往右/从右往左5，如果横向摆放，容器摆放不开，会自动换行浮动优点和缺点。浮动的优点，是可以让我们更加方便的去摆放一个容器内部的子容器，更加好的去设置他们的摆放位置。缺点：1，浮动会造成父级元素的塌方2，后续的元素会受到浮动影响。
复制链接

扫一扫

专栏目录