CSS基础--清除浮动

作者: 绚丽多彩的白 | 来源:发表于2020-04-12 18:54 被阅读0次

CSS基础-清除浮动
CSS基础-清除浮动
CSS基础--清除浮动
CSS浮动续
CSS clear both清除浮动
清除浮动
一篇文章带你了解CSS clear both清除浮动
CSS 中的浮动
CSS浮动.清除浮动
css浮动清除浮动

盒子高度问题

在标准流中内容的高度可以撑起盒子的高度

<style>

        div{
            background-color: red;
        }

        p{
            width: 200px;
            height: 100px;
            background-color: blue;
        }
        
</style>
    
<div>
    <p></p>
</div>

在浮动流中浮动元素内容的高不可以撑起盒子的高

<style>

        div{
            background-color: red;
        }

        p{
            float: left;
            width: 200px;
            height: 100px;
            background-color: blue;
        }
        
</style>
    
<div>
    <p></p>
</div>

清除浮动方式一

给前面的父盒子添加高度
示例代码:

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box1{
        background-color: red;
        /*这里*/
        height: 50px;
    }
    .box2{
        background-color: purple;
    }
    ul{
        list-style: none;
    }
    .ul01 li{
        background-color: blue;
    }
    .ul02 li{
        background-color: green;
    }
    ul li{
        float: left;
    }
</style>

<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加高度前:
添加高度后
注意点:
- 在企业开发中能不写高度就不写高度, 所以这种方式不常用

清除浮动方式二

利用clear:both;属性清除前面浮动元素对我的影响
示例代码:

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*这里*/
            clear: both;
            /*margin无效*/
            margin-top: 30px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
</style>

<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加clear: both;前:
添加clear: both;后
注意点:
- 使用clear:both之后margin属性会失效, 所以不常用

清除浮动方式三

在两个有浮动子元素的盒子之间添加一个额外的块级元素
示例代码:


<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
        /*这里*/
        .wall{
            clear: both;
        }
        .h20{
            /*利用额外块级元素实现margin*/
            height: 20px;
            background-color: deepskyblue;
        }
</style>
    
<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>

<!--这里-->
<div class="wall h20"></div>

<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加额外块级元素前
添加额外块级元素后
注意点
- 在外墙法中可以通过设置额外标签的高度来实现margin效果
- 搜狐中大量使用了这个技术, 但是由于需要添加大量无意义的标签, 所以不常用

清除浮动方式四

在前面一个盒子的最后添加一个额外的块级元素
示例代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
        /*这里*/
        .wall{
            clear: both;
        }
</style>
    
<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
    <!--这里-->
    <div class="wall"></div>
</div>

<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加额外块级元素前
添加额外块级元素后
注意点:
- 内墙法会自动撑起盒子的高度, 所以可以直接设置margin属性
- 和内墙法一样需要添加很多无意义的空标签，有违结构与表现的分离，在后期维护[图片上传中...(647982-48e7ca6f9f41706c.png-82fa36-1586687900638-0)]
  中将是噩梦

清除浮动方式五

什么是overflow:hidden?
- overflow:hidden的作用是清除溢出盒子边框外的内容
示例代码

.test{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background-color: red;
            overflow: hidden;
}
        
<div class="test">我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>

添加overflow:hidden前
添加overflow:hidden后

如何利用overflow:hidden;清除浮动
- 给前面一个盒子添加overflow:hidden属性
示例代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
            /*这里*/
            overflow: hidden;
            *zoom:1;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
</style>
    
<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加overflow:hidden;前
添加overflow:hidden;后
注意点:
- 由于overflow:hidden可以撑起盒子的高度, 所以可以直接设置margin属性
- IE8以前不支持利用overflow:hidden来清除浮动, 所以需要加上一个*zoom:1;
  - 实际上*zoom:1能够触发IE8之前IE浏览器的hasLayout机制
- 优点可以不用添加额外的标签又可以撑起父元素的高度, 缺点和定位结合在一起使用时会有冲突
*zoom:1;和_zoom:1的区别
- 这个是hack写法，用来识别不同版本的IE浏览器
- _后面的属性只有IE6能识别
- *后面的属性 IE6 IE7能识别

清除浮动方式六

给前面的盒子添加伪元素来清除浮动
示例代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        li{
            float: left;
        }
        
        /*这里*/
        .clearfix:after {
            /*生成内容作为最后一个元素*/
            content: "";
            /*使生成的元素以块级元素显示,占满剩余空间*/
            display: block;
            /*避免生成内容破坏原有布局的高度*/
            height: 0;
            /*使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互*/
            visibility: hidden;
            /*重点是这一句*/
            clear: both;
        }
        .clearfix {
            /*用于兼容IE, 触发IE hasLayout*/
            *zoom:1;
        }
</style>
<div class="box1 clearfix">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加伪元素前
添加伪元素后
注意点:
- 本质上和内墙法一样, 都是在前面一个盒子的最后添加一个额外的块级元素
- 添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性
- CSS中还有一个东西叫做伪类, 伪元素和伪类不是同一个东西

清除浮动方式七

给前面的盒子添加双伪元素来清除浮动
示例代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        li{
            float: left;
        }
        
        /*这里*/
        .cf:before,.cf:after {
            content:"";
            display:table;
            /*重点是这一句*/
            clear:both;
        }
        .cf {
            zoom:1;
        }
</style>
<div class="box1 clearfix">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加双伪元素前
添加双伪元素后
注意点:
- 添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性
- 先知道有这些方式, 原理需要学习到BFC和hasLayout才能明白
- 支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动；
- 不支持 BFC的浏览器（IE5-7），通过触发 hasLayout 闭合浮动。

CSS基础-清除浮动
清除浮动盒子高度问题在标准流中内容的高度可以撑起盒子的高度在浮动流中浮动元素内容的高不可以撑起盒子的高清除浮...
CSS基础-清除浮动
清除浮动盒子高度问题在标准流中内容的高度可以撑起盒子的高度在浮动流中浮动元素内容的高不可以撑起盒子的高清除...
CSS基础--清除浮动
盒子高度问题在标准流中内容的高度可以撑起盒子的高度在浮动流中浮动元素内容的高不可以撑起盒子的高清除浮动方式一...
CSS浮动续
CSS清除浮动案例 CSS版心居中显示案例清除浮动的四种用法： 1. 使用空标记清除浮动，隔墙法，增加标签 2....
CSS clear both清除浮动
原文地址：CSS clear both清除浮动 DIV+CSS clear both清除产生浮动我们知道有时使用了...
清除浮动
一、清除浮动 or 闭合浮动？清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：lef...
一篇文章带你了解CSS clear both清除浮动
一、前言 CSS clear both清除产生浮动，使用了css float浮动会产生css浮动，这个时候就需要...
CSS 中的浮动
浮动的定义：元素脱离文档流举栗子：修改 CSS 代码，清除浮动：浮动的影响：父元素高度塌陷清除浮动： ...
CSS浮动.清除浮动
给父级元素设置高度在底部添加一个空元素，清除浮动父级div定义 overflow:hidden或者auto 为...
css浮动清除浮动
float : left | right | none 设计之初的作用是做文字环绕 p标签段落双标签块级 i...