17.CSS-浮动

最新推荐文章于 2022-09-19 20:06:57 发布

山楂不甜

最新推荐文章于 2022-09-19 20:06:57 发布

阅读量117

点赞数

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

本文链接：https://blog.csdn.net/Veronnit/article/details/118785206

版权

笔记同时被 2 个专栏收录

60 篇文章 1 订阅

订阅专栏

css

31 篇文章 2 订阅

订阅专栏

文章目录

浮动

浮动

1.浮动流排版方式

浮动流是一种半脱离标准流的排版方式；
浮动流只有一种排版方式，就是水平排版，它只能设置某个元素左对齐或者右对齐；
注意点：
浮动流中没有居中对齐，也就是没有center这个值；
在浮动流中是不可以使用margin：0 auto；的。
特点：
在浮动流中是不区分块级元素、行内元素和行内块级元素的，无论是块级元素、行内元素和行内块级元素都可以实现水平排版；
在浮动流中无论是块级元素、行内元素和行内块级元素都可以设置宽高；
综上所述，浮动流中的元素和标准流中行内块级元素很像，既可以水平排版又可以设置宽高。

2.浮动元素的脱标

（1）什么是浮动元素的脱标？

脱标：脱离标准流
当某一个元素浮动之后，那么这个元素看上去就像被从标准流中删除了一样，这个就是浮动元素的脱标。

（2）浮动元素脱标了之后会有什么影响？

如果前面一个元素浮动了，而后面一个元素没有浮动，那么这个时候前面的一个元素就会盖住后面的一个元素。

3.浮动元素的排序规则

（1）相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素会显示在后面；

  <style>
    .box1{
      width: 50px;
      height: 50px;
      background-color: red;
      float: left;
    }
    .box2{
      width: 100px;
      height: 100px;
      background-color: pink;
      /*float: left;*/
    }
  </style>

在这里插入图片描述

  <style>
    .box1{
      width: 50px;
      height: 50px;
      background-color: red;
      float: left;
    }
    .box2{
      width: 100px;
      height: 100px;
      background-color: pink;
      float: left;
    }
  </style>

在这里插入图片描述

（2）不同方向上的浮动元素，左浮动的元素会找左浮动，右浮动的元素会找右浮动；

.box1{
      width: 50px;
      height: 50px;
      background-color: red;
      float: left;
    }
    .box2{
      width: 100px;
      height: 100px;
      background-color: pink;
      float: right;
    }
    .box3{
      width: 150px;
      height: 150px;
      background-color: yellow;
      float: left;
    }
    .box4{
      width: 200px;
      height: 200px;
      background-color: tomato;
      float: right;
    }

在这里插入图片描述

（3）浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置来确定。

.box1{
      width: 50px;
      height: 50px;
      background-color: red;
      float: left;
    }
    .box2{
      width: 100px;
      height: 100px;
      background-color: pink;
      /*float: right;*/
    }
    .box3{
      width: 150px;
      height: 150px;
      background-color: yellow;
      float: left;
    }
    .box4{
      width: 200px;
      height: 200px;
      background-color: tomato;
      /*float: right;*/
    }

在这里插入图片描述

    .box1{
      width: 50px;
      height: 50px;
      background-color: red;
      float: left;
    }
    .box2{
      width: 100px;
      height: 100px;
      background-color: pink;
      /*float: right;*/
    }
    .box3{
      width: 150px;
      height: 150px;
      background-color: yellow;
      float: left;
    }
    .box4{
      width: 200px;
      height: 200px;
      background-color: tomato;
      float: left;
    }

在这里插入图片描述

4.浮动元素的贴靠现象

当父元素的宽度足够放下所有浮动元素的时候，就会并列显示；当父元素的宽度不足够放下所有浮动元素的时候，那么就会从最后一个浮动元素开始往前面一个元素贴，直到贴到父元素的左边为止。

5.浮动元素的字围现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>62-浮动元素的字围现象</title>
    <style>
        /*div{
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid #000;
        }*/
        p{
            width: 500px;
            height: 500px;
            background-color: tomato;
        }
        img{
            float: left;
        }
    </style>
</head>
<body>
<!--<div></div>-->
<img src="images/zns.webp">
<p>。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。</p>
</body>
</html>

在企业开发中，网页的布局方式，在垂直方向上用标准流来排版，水平方向上用浮动流来排版。从上至下布局，从外向内布局，水平方向可以先划分一左一右再对左边或者右边进行进一步布局。

6.浮动元素的高度问题

在标准流中内容的高度可以撑起父元素的高度；在浮动流中，浮动元素无法撑起父元素的高度。

7.清除浮动的方式

方式一：给前面一个父元素设置高度
注意点：在企业开发中，能不写高度就不写高度，所以这种方式用的很少。

方式二：给后面的盒子添加一个 clear 属性。
clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。
clear 属性的取值：
none - 按照浮动元素的排序规则来排序（左浮动找左浮动，右浮动找右浮动）。默认值
left - 不要找前面的左浮动元素
right- 不要找前面的右浮动元素
both - 不要找前面的左浮动元素和右浮动元素
注意点：当我们给某个元素添加clear属性之后，margin属性就会失效。

方式三：隔墙法

外墙法
在两个盒子中间添加一个额外的块级元素；
给这个额外的块级元素设置clear：both；属性。
注意点：
外墙法可以让第二个盒子使用margin-top属性；
但是不可以让第一个盒子使用margin-bottom属性。
在企业开发中，通过外墙法还可以给额外的块级元素设置高度实现margin效果。

.wall{
      clear: both;
    }
.h20{
      height: 20px;
    }

<div class="wall h20"></div>

内墙法
在第一个盒子中所有子元素最后添加一个额外的块级元素；
给这个额外的块级元素设置clear：both；属性。
注意点：
内墙法可以让第二个盒子使用margin-top属性；
也可以让第一个盒子使用margin-bottom属性；
还可以给额外的块级元素设置高度实现margin效果。
外墙法和内墙法的区别
外墙法不能撑起第一个盒子的高度，而内墙法可以撑起第一个盒子的高度。
在企业开发中，不常用隔墙法来清除浮动，因为需要额外添加一个块级元素，这并没有任何语义，只是为了改变样式，那么就不符合HTML的作用，改变样式还是需要交给CSS来完成。

方法四：通过伪元素选择器给第一个盒子最后添加一个块级元素，并给这个块级元素设置一个clear：both；属性。
（本质上和内墙法一样。）

.box1::after{
      /*设置添加的子元素的内容为空*/
      content: "";
      /*设置添加的子元素为块级元素*/
      display: block;
      /*设置添加的子元素的高度为0*/
      height: 0;
      /*隐藏添加的子元素*/
      visibility: hidden;
      /*给添加的子元素设置clear: both;*/
      clear: both;
    }
.box1{
      /*兼容IE6*/
      *zoom:1;
    }

注意点：
伪元素选择器是CSS3提出的，IE6会有兼容问题。

方式五：
overflow：hidden；作用：
1.可以将超出标签范围的内容裁剪掉；
2.可以清除浮动;
3.让里面的盒子设置margin-top之后外面的盒子不被顶下来。
如何清除浮动：

.box1{
      background-color: red;
      /*margin-bottom: 10px;*/
      overflow: hidden;
    }

注意点：
可以让第二个盒子使用margin-top属性；
也可以让第一个盒子使用margin-bottom属性；
IE6会有兼容问题。

山楂不甜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
17.CSS-浮动

文章目录浮动1.浮动流排版方式2.浮动元素的脱标（1）什么是浮动元素的脱标？（2）浮动元素脱标了之后会有什么影响？3.浮动元素的排序规则4.浮动元素的贴靠现象5.浮动元素的字围现象6.浮动元素的高度问题7.清除浮动的方式浮动1.浮动流排版方式浮动流是一种半脱离标准流的排版方式；浮动流只有一种排版方式，就是水平排版，它只能设置某个元素左对齐或者右对齐；注意点：浮动流中没有居中对齐，也就是没有center这个值；在浮动流中是不可以使用margin：0 auto；的。特点：在浮动流中是不区分块
复制链接

扫一扫

专栏目录