CSS 浮动-阿里云开发者社区

传统网页布局的三种模式

网页布局的本质就是用CSS来摆放盒子, 把盒子拜访到相应的位置

CSS提供了三种传统布局方式, 简单来说就是盒子如何进行排列顺序 :

普通流 (标准流)
浮动
定位

所谓标准流, 就是按照标签规定好的默认方式排列 :

块级元素会独占一行 , 从上往下顺序排列,
常见块级元素: div, hr, p, h1~h6, ul, ol, form, table
行内元素会按照顺序排列, 从左向右排列, 碰到父元素则边缘自动换行
常用元素span, a, i, em

以上都是标准流布局

当然只使用我们的标准流是很难控制的, 例如有如下场景, 我们需要将手机和查看全部分别设置到这个盒子的两端, 这个时候标准流就不是很适用, 就需要换一种方式

为什么需要浮动?

问题: 如何让多个块级盒子div 水平排列成一行 ???

但是我们知道, div是块级元素, 一个块级元素会单独占一行, 就算你设置了 div盒子的高度和宽度, 他还是会独占一行.

就例如如下code :

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border-radius: 20px;
            border-color: blue;
            border-style: solid;
        }
    </style>
    <div></div>
    <div></div>
    <div></div>

那么如何将其设置为并排的, 可以利用我们之前学过的行内块, 添加属性: display: inline-block

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border-radius: 20px;
            border-color: blue;
            border-style: solid;
 
            display: inline-block;
        }
    </style>
    <div></div>
    <div></div>
    <div></div>

但是你会发现他们中间会默认有一个空白间隙, 这个空白空隙是几个像素我们不知道, 但是在实际开发中这种缝隙的大小都是需要非常精准的,

这种页面布局真的是太常见了, 例如:

这一个一个的商品就是几个并排的盒子构成的, 他们排列在一行, 如果用我们的标准流肯定是行不通的.

有的时候我们还需要实现两个盒子的左右对齐.

这个时候使用我们的标准流也是行不通的.

网页浮动第一准则, 多个块级元素纵向排列找标准流, 多个块级元素横向排列找浮动

什么是浮动?

float 属性用于创建浮动框, 将其移动到一边, 直到左边缘或者是右边缘触及包含块或者另外一个浮动框的边缘.

如何使用浮动

设置CSS属性: float : 属性值;

属性值	描述
none	元素不浮动(默认值)
left	元素向左浮动
right	元素向右浮动

浮动的重要特性

脱离标准普通的控制并移动到指定位置, 俗称脱标
浮动的盒子不再保留原来的位置

演示:

    <style>
        .test {
            width: 200px;
            height: 200px;
            background-color: pink;
            border-radius: 20px;
            border-color: blue;
            border-style: solid;
 
            float: left;
        }
 
        .noFloat {
            width: 300px;
            height: 300px;
            background-color: black;
        }
    </style>
    <div class="test"></div>
    <div class="noFloat"></div>

如果多个盒子都设置了浮动, 则他们会按照属性值一行内显示并且顶端对齐排列

注意: 浮动的元素是互相贴靠在一起的(不会有缝隙), 如果父级宽度装不下这些浮动的盒子, 多出的盒子就会另起一行对齐.

浮动元素会具有行内块元素特性.

任何元素都可以浮动, 不管原先是什么模式的元素, 添加浮动之后具有行内块元素相似的特性.

    <span>
    </span>
 
    <style>
        span {
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            background-color: skyblue;
        }
    </style>

将会什么都不显示

但是如果我加上float属性之后 ,他就具备了行内块元素的特点, 也就是具有了高度和宽度:

    <span>
    </span>
 
    <style>
        span {
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            background-color: skyblue;
            float: left;
        }
    </style>

不管你原先属于什么模式的元素, 添加浮动之后都具备行内块元素的特性:

    <span>
        span标签
    </span>
    <div>
        div标签
    </div>
    <style>
        span,
        div {
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            background-color: skyblue;
            float: left;
        }
    </style>

设置了浮动之后, 不需要显示的转换元素显示模式, 就可以具备行内块元素的性质

块级盒子没有设置宽度就和父级一样宽, 但是添加浮动之后, 它的大小根据内容来定

    <span>
        span标签
    </span>
    <div>
        div标签
    </div>
    <p>
        这是一个p标签
    </p>
    <style>
        span,
        div {
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            background-color: skyblue;
            float: left;
        }
 
        p {
            height: 300px;
            float: right;
            background-color: red;
        }
    </style>

浮动元素经常和标准父级搭配使用

为了约束浮动元素的位置, 我们网页布局一般采用的策略是:

先用标准流的父元素排列上下位置, 之后内部子元素采用浮动排列左右位置, 符合网页布局第一准则.

这样的浮动盒子, 就不会受浏览器的影响了, 就会只受父级盒子影响居中显示

常见网页布局

自上而下

按标准流来从上往下排列

当然我们也可以细化一下我们的main

浮动元素注意点

浮动和标准流的父盒子搭配

对于整体的需要上下来排列的, 使用标准流进行排列

对于标准流中需要左右排列的, 使用浮动来配置.

一个父盒子中有多个子盒子

如果这多个子盒子中有一个使用浮动, 那么其他兄弟子盒子也需要浮动.

同时, 标准流只能影响后面的标准流盒子, 不会影响前面的标准流.

清除浮动

简介

清除浮动的原因是, 浮动的元素是不占位置的. 你可以想象为腾空了.

下面这种图只是一个理想的状态.

对于上面这个模型, 假设是外层一个大的div, 里面拥有四个小盒子, 这四个小盒子是浮动的, 但是因为这个外层的div已经设置了width值, 其高度已经固定死了. 但是如果想在要求加入第五个浮动的小盒子, 那么就会导致位置不够, 浮动的元素跑到下一行去了, 此时还需要将div大盒子高度增加一个小盒子的高度.

但是如果我们不仅仅只是局限于两三行这样的小盒子浮动呢? 但是我又不能确定父盒子的高度. 因此不会去设置父盒子的高度, 但是当前所有的元素都是浮动的, 此时, 父级盒子中是没有元素占有位置的, 因此当前高度是0 , 因此如果你想要在当前的大div容器下面添加额外的div盒子, 就会被浮动元素覆盖. 影响了下面的标准流盒子, 如下:

代码案例如下:

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 800px;
      background-color: pink;
      margin: 0 auto;
    }
 
    .box .left {
      float: left;
      height: 400px;
      width: 300px;
      background-color: grey;
      margin-right: 20px;
    }
 
    .box .right {
      float: left;
      height: 400px;
      width: 300px;
      background-color: grey;
    }
    .box2 {
      width: 1000px;
      height: 200px;
      background-color: brown;
      margin:0 auto;
    }
  </style>
</head>
 
<body>
  <div class="box">
    6
    <div class="left">左青龙</div>
    <div class="right">右白虎</div>
  </div>
  <div class="box2">
 
  </div>
</body>
 
</html>

如何解决? 解决方法就是清除浮动..

如何清除浮动?

清除浮动的本质就是, 清除浮动元素造成的元素站位为0的问题.
如果父盒子本身有高度, 就不需要清除浮动
清除浮动之后, 父级盒子就会根据浮动的子盒子, 自动检测盒高度和适应, 父级盒子就会有自动有合适的高度, 就不会影响下面的标准流的父级盒子.

浮动清除

清除浮动语法:

选择器 { clear: 属性值; }

left: 不允许左侧有浮动元素(清除左侧浮动的影响)
right: 不允许右侧有浮动元素(清除右侧浮动的影响)
both: 同时清除左右两侧浮动的影响

清除浮动的策略是: 闭合浮动.

有下面三种:

额外标签法,也称为隔墙法, 是w3c推荐的做法
父级添加overflow属性
父级添加after伪元素
父级添加双伪元素

额外标签法

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 800px;
      background-color: pink;
      margin: 0 auto;
    }
 
    .box .left {
      float: left;
      height: 400px;
      width: 300px;
      background-color: grey;
      margin-right: 20px;
    }
 
    .box .right {
      float: left;
      height: 400px;
      width: 300px;
      background-color: grey;
    }
    .box2 {
      width: 1000px;
      height: 200px;
      background-color: brown;
      margin:0 auto;
    }
    .clear {
      clear: both;
    }
  </style>
</head>
 
<body>
  <div class="box">
    6
    <div class="left">左青龙</div>
    <div class="right">右白虎</div>
    <div class="clear"></div>
  </div>
  <div class="box2">
 
  </div>
</body>
 
</html>

通过在浮动元素后面添加一个空的块级元素，并设置clear: both;样式，可以确保这个空元素不会浮动，并且会出现在浮动元素之后，占据一定的空间。这样，它就可以作为一个“墙”或者“分隔符”，将浮动元素与其后面的标准流元素隔开。

但是这种做法有一个前提就是,添加的标签必须是块级元素 , 不能是行内元素.

overflow清除浮动

可以给父级添加overflow属性, 将其属性值设置为hidden, auto, scroll

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 800px;
      background-color: pink;
      margin: 0 auto;
      overflow: hidden;
    }
 
    .box .left {
      float: left;
      height: 400px;
      width: 300px;
      background-color: grey;
      margin-right: 20px;
    }
 
    .box .right {
      float: left;
      height: 400px;
      width: 300px;
      background-color: grey;
    }
    .box2 {
      width: 1000px;
      height: 200px;
      background-color: brown;
      margin:0 auto;
    }
  </style>
</head>
 
<body>
  <div class="box">
    6
    <div class="left">左青龙</div>
    <div class="right">右白虎</div>
  </div>
  <div class="box2">
 
  </div>
</body>
 
</html>

缺点就是无法显示多出来的部分:

后面详细说这个overflow

after伪元素

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 800px;
      background-color: pink;
      margin: 0 auto;
      overflow: hidden;
    }
 
    .box .left {
      float: left;
      height: 400px;
      width: 300px;
      background-color: grey;
      margin-right: 20px;
    }
 
    .box .right {
      float: left;
      height: 400px;
      width: 300px;
      background-color: grey;
    }
    .box2 {
      width: 1000px;
      height: 200px;
      background-color: brown;
      margin:0 auto;
    }
 
    .clearfix:after {
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
 
  </style>
</head>
 
<body>
  <div class="box clearfix">
    6
    <div class="left">左青龙</div>
    <div class="right">右白虎</div>
  </div>
  <div class="box2">
 
  </div>
</body>
 
</html>

父级添加双伪元素

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 800px;
      background-color: pink;
      margin: 0 auto;
      overflow: hidden;
    }
 
    .box .left {
      float: left;
      height: 400px;
      width: 300px;
      background-color: grey;
      margin-right: 20px;
    }
 
    .box .right {
      float: left;
      height: 400px;
      width: 300px;
      background-color: grey;
    }
    .box2 {
      width: 1000px;
      height: 200px;
      background-color: brown;
      margin:0 auto;
    }
 
    .clearfix:before, .clearfix:after {
      content: "";
      display: table;
    }
    .clearfix:after {
      clear: both;
    }
 
  </style>
</head>
 
<body>
  <div class="box clearfix">
    6
    <div class="left">左青龙</div>
    <div class="right">右白虎</div>
  </div>
  <div class="box2">
 
  </div>
</body>
 
</html>

CSS 浮动

传统网页布局的三种模式

为什么需要浮动?

什么是浮动?

如何使用浮动

浮动的重要特性

浮动元素经常和标准父级搭配使用

常见网页布局

浮动元素注意点

清除浮动

简介

浮动清除

额外标签法

overflow清除浮动

after伪元素

父级添加双伪元素

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

CSS 浮动

传统网页布局的三种模式

为什么需要浮动?

什么是浮动?

如何使用浮动

浮动的重要特性

浮动元素经常和标准父级搭配使用

常见网页布局

浮动元素注意点

简介

浮动清除

额外标签法

overflow清除浮动

after伪元素

父级添加双伪元素

热门文章

最新文章

相关课程

相关电子书

相关实验场景