CSS浮动布局详解-优快云博客

浮动在CSS中也是相当重要的。
如果不使用浮动，只按照不同种类的标签进行布局，这种布局方案叫流式布局，所谓的流式布局，就是按照标准文档流进行的布局。但这种布局不能让块级标签并排显示。
因此有了浮动布局，目的就是可以让块级元素在同一行上并排显示。让一个块级元素在同一行并排显示的方案比较多，浮动仅仅是其中的一个方案而已。浮动是半脱离标准文档流的。一个元素浮动了，它并没有脱离父元素。两个div，如果上面的div浮动了，下面的div就会钻上去，但是如果下面的div中有文字，这文字是没有办法钻上去。这是浮动的特性：字围效果。两个div，都浮动了，此时它俩就贴靠在一起，这是浮动的另一个特性：贴靠性。此时两个div就可以并排显示了。如果一个父元素中的子元素都浮动了，就不能撑起父元素了，父元素的高度就变了0，也就是所谓的父元素高度塌陷。也就是说浮动对父元素的高度造成了影响，清除这种影响，也就是如何清除浮动，可以使用overflow:hidden 。他的本职工作是用来处理溢出的，但是它有一个小偏方，可以用来清除浮动。

一：浮动的初衷。

浮动刚创建出来时，并不是为了实现块级元素并排显示的。是实现所谓的字围效果，文字绕着图片走。
浮动会脱离标准文档流，比如一张图片浮动了，后面的元素就向上钻，但是文字不会钻，它会围绕图片。
浮动是半脱离标准文档，文字会环绕在图片周围，如果是全脱离标准文档流，文字都会直接钻上去。
在CSS中，定位是完全脱离标准文档流，浮动半脱离标准文档流。
但是，现在我们使用浮动，并不是为了字围效果，使用浮动让块级元素可以并排显示，进行网页的布局。
如果我们不让图片浮动，效果如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字围效果</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="../images/001.jpg" width="250" alt="">
        <p>夺取疫情防控和实现经济社会发展目标的双胜利，是对我们的一次重大考验。在坚决做好疫情防控工作的前提下，我们以变应变，不断加大宏观政策调节力度，有效缓解了疫情带来的负面影响，稳定了市场预期；充分利用金融和财政手段，发挥了金融机构对疫情防控工作和实体经济的支持作用；各地因地制宜、积极动员部署，支持和推动各类企事业单位复工复产，为社会稳定和经济可持续发展提供了重要保障……改革发展稳定各项工作统筹推进、井然有序、成效显著，充分彰显了我国经济能够应对各种风浪考验的强大韧性。</p>
    </div>
</body>
</html>

在这里插入图片描述
如果我们让图片浮动起来的话，就是字围效果，代码效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字围效果</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
            border: 1px solid red;
        }
        img{
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="../images/001.jpg" width="250" alt="">
        <p>夺取疫情防控和实现经济社会发展目标的双胜利，是对我们的一次重大考验。在坚决做好疫情防控工作的前提下，我们以变应变，不断加大宏观政策调节力度，有效缓解了疫情带来的负面影响，稳定了市场预期；充分利用金融和财政手段，发挥了金融机构对疫情防控工作和实体经济的支持作用；各地因地制宜、积极动员部署，支持和推动各类企事业单位复工复产，为社会稳定和经济可持续发展提供了重要保障……改革发展稳定各项工作统筹推进、井然有序、成效显著，充分彰显了我国经济能够应对各种风浪考验的强大韧性。</p>
    </div>
</body>
</html>

在这里插入图片描述

二：浮动的特性

１）浮动的特性之破坏性：就是破坏了流式布局，可以让块级元素并排显示。在CSS3中，提出更好的一种布局方案，叫flex布局。在移动端（手机，平板）开发，可以使用flex来代替浮动布局。
２）浮动的块级元素具有包裹性，
必须是块级元素，并且这个块级元素没有明确的设置尺寸。如果一个块级元素的width没有设置，它的宽度就是父元素的宽度的100%。如果此时让它浮动了，它的宽度由内容来决定，尽可能地压缩空间。这就是块级元素浮动所产生的包裹性。里面有多少内容，它的宽度就是多少。
浮动的行内元素会变成块级元素，一个行内元素浮动了，相当于做了一个变性手术，变了块级元素。一次就可以设置宽高了。
３）贴靠性：
当元素向同一个方向浮动，它们会紧紧在贴在一起，当父元素宽度变小时，老三贴不了老二，它会贴老大，前提是可能贴到老大上面，如果老大没有条件让它贴靠，它会贴父元素。
４）仍然受父元素的控制。
当父元素的宽度变小时，浮动的元素也会换行，但是它不可以浮动到父元素的外面。也就是说浮动元素仍然受父元素的控制。

三：浮动造成的影响

浮动会造成影响，包含对两个方面的影响：
1）父元素造成影响：造成父元素的高度塌陷
2）对后面的兄弟元素造成影响
３）浮动元素超出父元素的高度，也会对后面的元素造成影响：

解决对父元素造成的影响：

１）加高法直接给父元素加高度用的不多
２）overflow的小偏方，强制浏览器重新计算父元素的高度
３）让父元素也浮动起来
４）使用clear清除对父元素造成的影响(内墙法)：
ａ) 给父元素添加一个子元素这个子元素不浮动，添加到最后。

 <div class="father">
            <div class="son1" style="background-color: red;">son1</div>
            <div class="son2" style="background-color: yellow;">son2</div>
            <div class="son3" style="background-color: blue;">son3</div>
            <div>hello</div>
</div>

ｂ) 给这个元素加上clear:both

 <div class="father">
                <div class="son1" style="background-color: red;">son1</div>
                <div class="son2" style="background-color: yellow;">son2</div>
                <div class="son3" style="background-color: blue;">son3</div>
                <div style="clear: both;">hello</div>
</div>

解决对后面的兄弟元素造成影响：

clear 解决对兄弟元素造成影响。谁受影响了，就在谁的身上加上clear。
clear取值：
left ：清除左浮动所造成的影响。代表后面的元素也不受影响。只能清除左浮动所造成的影响，不能清除右浮动所造成的影响。
right : 清除右浮动所造成的影响。只对右浮动有效。
both : 清除左右浮动所造成的影响。开发中，直接使用both就OK。
none ：默认值，表示不清除这种影响。

解决对后面的元素造成影响：

１）在受影响元素上面加上clear:both。
２）overflow：本意是用来处理溢出的。
hidden 溢出的内容会被隐藏掉，不可见。
scroll 溢出的内容产生滚动条通过滚动条可到全部的内容
visible 默认值溢出的内容正常显示
注意：１）溢出的内容的内容不占页面空间。
２）clear只能作用于块级元素，对于行内元素是没有效果。

注意点：
１.一个浮动的元素只能影响它后面的元素，前面的元素是影响不到的。
２.一个块级元素没有浮动，它肯定会独占一行的。
３.clear只能作用于块级元素，对于行内元素是没有效果。
４.右浮动的元素写在前面：
如果盒子中只有右浮动，没有左浮动，效果会有错行的效果。解决：把右浮动的元素写在前面
如果有左浮动，也有右浮动，那么谁写在前面（左浮动的元素或是右浮动的元素）都OK的。

真实开发中，我们会使用after伪元素来清除浮动：

伪元素：页面中不存在的一个元素 after伪元素：
.father:after 表示在father元素的内部最后添加一个元素
创建出来的伪元素默认并不是块级的，clear只能作用块级元素，所以说需要给这个伪元素添加display:block

 .father:after{
        content:"hello";   新增加元素中的内容
        clear: both;   用来清除浮动的
        display: block;  让伪元素变成块级，默认是inline
    }

通常写法：

 .clearfix:after{
        display: block;
        content: "";
        overflow:hidden;
        height:0;
        clear: both;
        visibility: hidden;
    }
    .clearfix{*zoom:1}

我们看看浮动的元素对它后面的元素造成影响：

比如让三个DIV浮动，有２７种组合方式。
１）先试试三个DIV都不浮动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动深入</title>
    <style>
        *{margin: 0; padding: 0;}
        .father{
            width: 500px;
            height: 500px;
            border: 3px solid red;
            margin: 20px auto;
        }
        .son1, .son2, .son3{
            width: 120px;
            height: 120px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1" style="background-color: red;">son1</div>
        <div class="son2" style="background-color: yellow;">son2</div>
        <div class="son3" style="background-color: blue;">son3</div>
    </div>
</body>
</html>

在这里插入图片描述
２）son1，son2，son3：左浮动，不浮动，不浮动。ｓｏｎ２会钻上去而文字不会，同时ｓｏｎ３会顶替ｓｏｎ２的位置。

在这里插入图片描述
３）son1，son2，son3：左浮动，不浮动，左浮动。

４）son1，son2，son3：左浮动，不浮动，右浮动。

５）son1，son2，son3：左浮动，左浮动，不浮动。

６）son1，son2，son3：左浮动，左浮动，左浮动。

７）son1，son2，son3：左浮动，左浮动，右浮动。
在这里插入图片描述
８）son1，son2，son3：左浮动，右浮动，不浮动。

９）son1，son2，son3：左浮动，右浮动，左浮动。

１０）son1，son2，son3：左浮动，右浮动，右浮动。

１１）son1，son2，son3：右浮动，不浮动，不浮动。
在这里插入图片描述
１２）son1，son2，son3：右浮动，不浮动，左浮动。

１３）son1，son2，son3：右浮动，不浮动，右浮动。

１４）son1，son2，son3：右浮动，左浮动，不浮动。

１５）son1，son2，son3：右浮动，左浮动，左浮动。
在这里插入图片描述
１６）son1，son2，son3：右浮动，左浮动，右浮动。

１７）son1，son2，son3：右浮动，右浮动，不浮动。

１８）son1，son2，son3：右浮动，右浮动，左浮动。

１９）son1，son2，son3：右浮动，右浮动，右浮动。
在这里插入图片描述
２０）son1，son2，son3：不浮动，不浮动，左浮动。

２１）son1，son2，son3：不浮动，不浮动，右浮动。

２２）son1，son2，son3：不浮动，左浮动，不浮动。

２３）son1，son2，son3：不浮动，左浮动，左浮动。
在这里插入图片描述
２４）son1，son2，son3：不浮动，左浮动，右浮动。

２５）son1，son2，son3：不浮动，右浮动，不浮动。

２６）son1，son2，son3：不浮动，右浮动，左浮动。

２７）son1，son2，son3：不浮动，右浮动，右浮动。

在这里插入图片描述

四：浮动的应用

1）页面中的左右结构
实现：
父元素 .clearfix
左 float:left
右 float:right
2）页面中多列布局
实现：
父元素 .clearfix
第1列 float:left
第2列 float:left
第3列 float:left
第4列 float:left
…
每一列中间的间隙。margin-right
中间1px边框的问题 margin负值

3）左侧固定宽度，右侧自适应
实现：
父元素：当父元素的宽度变化时，那么右侧的宽度也跟着变化
左侧宽度固定浮动
右侧 margin-left

4）页面中的左中右结构
实现
父元素：不需要清除浮动
左：左浮动
中： text-align:center; margin:0 auto;
右：右浮动