css浮动

最新推荐文章于 2022-07-20 12:27:04 发布

-然-

最新推荐文章于 2022-07-20 12:27:04 发布

阅读量123

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_42548846/article/details/104431414

版权

一、什么是浮动？

浮动就是半脱离文档流。定位完全脱离文档流。浮动用来布局，使块级元素能够并排显示。

浮动分为float:left（左浮动）；float:right（右浮动）。

二、浮动的特点

（一）、包裹性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
       *{margin: 0;padding: 0;}
       div{
           border: 1px solid red;
       }
    </style>
</head>
<body>
    <div>aaaaaaaaaaaaa</div>  
</body>
</html>

写一个盒子，不给盒子设置宽度，盒子里面放上内容，这时盒子宽度默认为父元素的100%。

我们给它加上浮动。让盒子左浮动（float:left)。

这时盒子的内容就由它的内容来决定了。这就是浮动的包裹性。

即如果一个块级元素，没有设置宽度，那么它的宽度就是父元素的100%。若它浮动了，那么它的宽度就由内容来决定。

注意：包裹性的条件：块级元素；没有明确设置宽度。

（二）、块级性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
       *{margin: 0;padding: 0;}
       span{
           border: 1px solid red;
           float: left;
       }
    </style>
</head>
<body>
    <span>aaaaaaaaaaaaa</span>  
</body>
</html>

我们给一个行内元素设置浮动。

发现它变成了块级元素，这就是浮动的块级性。

即浮动的行内元素会变成块级元素。

注意：对于一个行内元素，给它设置宽度高度是无效的。如果我们给它加了浮动，他便变成了块级元素，就可以设置宽度和高度了。

（三）、破坏性

破坏了流式布局，可以让块级元素并排显示。

流式布局：按照标签的特征进行的默认布局，即从上到下，从左到右。块级元素独占一行，行内元素并排显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
       *{margin: 0;padding: 0;}
       div{
           border: 1px solid red;
       }
       div p{
           float: left;
       }
    </style>
</head>
<body>
    <div>
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    </div>
</body>
</html>

在块级元素里，

给子元素设置了浮动，并没有给父元素设置浮动。此时，子元素的内容并没有撑起父元素，父元素坍塌了。

解决坍塌的解决方法（清除浮动的方法）：

1、给父元素加 overflow: hidden;

overflow本意用来处理溢出。

属性	说明
overflow:hidden	溢出的内容会被隐藏掉，不可见。
overflow:scroll	溢出的内容产生滚动条。
overflow:visible	默认值，溢出的内容正常显示。

注意：溢出的内容不占空间。

2、在父元素结束前，加一个空的div,给这个div设置clear:both;（内墙法）。

clear分为clear:left（清除左浮动）；clear:right（清除右浮动）；clear:both（清除左右浮动）。

注意：clear只能作用于块级元素，对行内元素无效。

3、给父元素加一个高度。

4、给父元素也加浮动。

5、使用after伪元素来清除浮动。

after伪元素：页面中不存在的一个元素。

.father::after表示在father后加一个伪元素，创建出来的伪元素默认并不是块级的，所以要加display:block;让这个伪元素变成块级元素。然后再用clear:both;来清除浮动。

一般情况下，我们会把这个伪元素设置成初始化样式。用的时候，直接在盒子里加。这个样式为：

 .clearfix::after{
          clear: both;
          display: block;
          /* content引号里面的是伪元素里面的内容 */
          content: "";
          overflow: hidden;
          height: 0;
      }

三、浮动的元素相互贴靠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动元素相互贴靠</title>
    <style>
        .father{
            width: 500px;
            float: left;
            border: 1px solid red;
        }
        .son1,.son2,.son3{
            width: 100px;
            float: left;
        }
        .son1{height: 120px;background-color: blue;}
        .son2{height: 140px;background-color: yellow;}
        .son3{height: 100px;background-color: green;}
    </style>
</head>
<body>
    <div class="father">
        <div class="son1">son1</div>
        <div class="son2">son2</div>
        <div class="son3">son3</div>
    </div>
</body>
</html>

给一个父元素设置三个子元素，让三个元素都左浮动。此时三个子元素紧紧的贴靠在一起。