浮动模型和清除浮动

作者: Papio_y | 来源:发表于2018-05-07 18:18 被阅读0次

浮动模型和清除浮动
第025篇：CSS2
浮动和清除浮动
浮动和清除浮动
浮动和清除浮动
CSS属性
清除浮动
11.22 前端学习
前端06
06 前端学习

什么是浮动模型

先用代码来展示一下float会出现什么样的效果

<div class="box">
    <div class="demo">1</div>
    <div class="demo">2</div>
    <div class="demo">3</div>
</div>

.box{
    border: 1px solid #ccc;
    width: 400px;
    height: 100px;
}
.demo{
    width: 98px;
    height: 98px;
    background-color: black;
    color: #fff;
    border: 1px solid #fff;
}

正常情况下，这三个div的布局应该是这样的：

正常的块布局.png
当给box下面的demo加上float:left; 之后的布局：

float之后的布局.png
可以看到这里的效果就是float的效果了。

浮动属性

float可以去两个属性值：right , left

这里的float属性的作用，就是让操作的这一系列或者一个元素站队，比如上面的，当我们设置了float:left; 之后，设置了float属性的元素就会按照先后属性，自左向右的站队，当然==当一行站不下去的时候会换行==，同理当我们使用float:right; 的时候，元素会按照先后顺序自右向左的排序。这的先后顺序指的是html结构当中的先后顺序。
在浮动的过程当中，可以通过添加margin来调节距离。
父级的边界能够多站一个就多站一个，但是站不下的就换行

语法

浮动元素产生了浮动流，浮动流对不同的元素的影响是不同的
所有产生了浮动流的元素，==块级元素看不到它==
产生了bfc的元素和文本类属性inline-block的元素以及文本元素能够看到它

这两种效果展示一下

<div class="box"></div>
<div class="demo"></div>

.box{
    float: left;
    background-color: red;
    width: 100px;
    height: 100px;
}
.demo{
    opacity: 1;
    width: 100px;
    height: 200px;
    background-color: black;
}

浮动元素遇见了块级元素.png
很显然，黑色的长方形，好像和红色的不在同一个层面上，想前面移动占位了，所以块级元素看不到浮动元素
当我们给黑色的方块加上display:inline-block 的时候

inline-block的元素对应的浮动.png
我们会发现，这里的黑色方块能够看到红色方块
当我们使用文字的时候 在浮动元素的后面加上文字

文字对应的浮动元素.png
同样也能看到
当我们在块级元素当中加上文字呢？

浮动元素遇见了块级元素.png
这里还是不行的！！！

浮动流的影响

浮动流有时候会带来一些很不理想的结果，例如下面的，当子元素都设置浮动之后，本来是有子元素撑开的父级元素受到浮动流的影响，撑不开了！

<div class="box">
    <div class="demo">1</div>
    <div class="demo">2</div>
    <div class="demo">3</div>
</div>

.box{
    border: 5px solid red;
    width: 500px;
}
.demo{
    /*float: left;*/
    background-color: green;    
    width: 98px;
    height: 98px;
    border: 1px solid #fff;
}

当我们注释掉float:left的时候：

正常的.png
但是当我们去掉注释的时候:

受到浮动流影响之后.png
可以看到父级元素看不到子元素了，成了一个没有内容的盒子

清除浮动流

在盒子的末尾加上一个<p></p> 清楚浮动流，使用一个专门用来清楚浮动流的属性clear:both 该属性还有left right 的属性值，但是一般不用

<div class="box">
    <div class="demo">1</div>
    <div class="demo">2</div>
    <div class="demo">3</div>
    <p></p>
</div>

p {
    margin: 0;
    /*去除p标签默认的margin*/
    width: 500px;
    height: 5px;
    /*这里的p可以height为0的，只有逻辑上它在这里就行了！*/
    background-color: orange;
    clear: both;
}

image.png

这种额外添加结构的方法是很不理想的，所以这种方法知识理论上面可行的，或者在某种情况下刚好就有一个p标签在它的最后面

使用伪元素来实现清除浮动

伪元素，确实存在的结构，但是没有结构的元素，权重值是1和tag一样。

伪元素是在元素当中，天生就存在的元素，我们可以通过css选择器选中他们，然后对他们进行一些操作，比较常见的有::after ::before 这两个表示在元素逻辑的最后面和最前面！！！

<span>sheep</span>

span {
    color: green;
}
span::before{
    content: "so cool sheep";
    color: red;
}
span::after {
    content: "cool sheep";
    color: blue;
}

image.png

可以看到这里的span元素的前面和后面都加上了内容！！！这就是伪元素的效果，当然我们可以通过一些css样式来让伪元素有跟更加好的效果！

这里的::after 刚好可以避免p标签添加无用html结构的缺点了！！！ ==这是我们最常用的方法==

.box::after {
    content: "";  // 伪元素独有的属性，这里将伪元素的内容设置为空
    display: block;  // 伪元素天生就是行级元素，在清楚浮动的时候要改变该属性
    clear: both;
}

但是我们的ie6 ie7当中没有伪元素这样的概念怎么办呢？

可以适用触发bfc的方式来清除浮动流，但是这里先介绍一下ie6和ie7当中特有的一个东西--hasLayout，触发hasLayout和触发bfc的效果是很相似的，同样能触发它的方式有很多，这里介绍一种对页面影响较小的一个zoom 属性, ie6 和 ie7当中就可以适用该属性来清除浮动了。

.wrapper {
      zoom:1; //视口同比例放大还是缩小，1就是不变
}

但是其他的浏览器并不需要zoom这个属性，这个属性只是为了ie6和ie7准备的，所以这个时候我们需要一点点css hack，我们在zoom前面加一个号， zoom: 1; 这个符号只有ie6和ie7能够识别，其他的浏览器都不识别，这样就可以让只有ie6和ie7去读这一行属性，其他浏览器直接忽略。顺便一提属性前面加上’_**‘之后，就只有ie6可以识别了。_zoom: 1;

下面来介绍适用bfc来清楚浮动流

overflow:hidden
display: inline-blocl
position: absolute

其实当我们给父级元素.box 设置了float属性之后，同样可以清楚浮动流，这是为什么呢？

==原因是设置了position: absolute; float: left / right 的元素，它们会自动变成inline-block 元素。

<span>我本来是一个行级元素，不能设置宽高</span>

span{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: green;
}

image.png

这里的span能够设置宽高了！

浮动的应用场景

报纸类的布局，图片环绕文字的处理（默认情况下，图片和文字是底部对齐）

img {
    float: left;
}

很多导航栏的样式都是适用ul>li + 浮动实现的比如淘宝头顶的一个

<ul class = 'nav'>
    <li class = "list-item">
        <a href = "#">天猫</a>
    </li>
    <li class = "list-item">
        <a href = "#">聚划算</a>
    </li>
    <li class = "list-item">
        <a href = "#">天猫超市</a>
    </li>
</ul>

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family: arial;
}
/*这样的结构我们清除一下浮动流比较好*/
.nav::after{
    content: "";
    display: block;
    clear: both;
}
.nav .list-item{
    float: left;
    margin: 0 10px;
    height: 30px;
    line-height: 30px;
}
.nav .list-item a {
    color: #f40;
    height: 30px;
    line-height: 30px;
    font-weight: bold;
    padding: 10px;
    border-radius: 15px; // 圆角属性
}
.nav .list-item a:hover {
    color: #fff;
    background-color: #f40;
}

image.png

使用浮动来实现三栏布局，两栏布局的原理相同

<div class="left"></div>
<div class="right"></div>
<div class="mid"></div>
<!-- 这里的mid必须在最下面，因为mid是块级元素，独占一行，如果不在最下面的话会把其他的元素挤下去 -->

*{
    margin: 0;
    padding: 0;
}
.left{
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
}
.right{
    float: right;
    width: 100px;
    height: 100px;
    background-color: blue;
}
.mid{
    /*空出10px让我们更容易的观察到它*/
    margin-left: 110px;
    margin-right: 110px;
    height: 100px;
    background-color: green;
}

image.png