16-CSS基础-清除浮动

<a href="http://study.163.com/course/courseMain.htm?courseId=1003864040">配套视频观看地址</a>

清除浮动

盒子高度问题

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

<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属性
    • 和内墙法一样需要添加很多无意义的空标签,有违结构与表现的分离,在后期维护中将是噩梦

清除浮动方式五

  • 什么是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 闭合浮动。

原文地址:https://www.cnblogs.com/xc1234/p/8398499.html

时间: 2024-09-27 10:39:16

16-CSS基础-清除浮动的相关文章

CSS基础知识---浮动,定位和盒模型

转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现在内容区域的周围,如果为元素添加背景,那么背景就会应用于由内容和内边距组成的区域.添加边框会在内边距的区域外边加一条线.在边框外边是外边距,外边距是透明的,一般用它来控制元素之间的间隔. 内边距,边框,和外边距是可选的,默认值为零.但是许多元素由用户代理样式表设置了外边距和内边距,我们可以将元素的m

【css】清除浮动的几种方式

[css]清除浮动的几种方式 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: 1 .news { 2 background-color:gray; 3 border:1px solid black; 4 } 5 .news img { 6 float:left; 7 } 8 .news p { 9 float:right; 10 } 11 <divclass="news"> 12 <imgsrc="/img/news-pic.jgp"

第五天-css基础(浮动 网页布局 定位方式,清除定位)

基础知识-css第五天,今天学习了css主要知识浮动,和定位,都是关于网页布局的.这个2块知识用好了,后期做好看的动画,布局就不成问题了. 浮动left 浮动的框可以向左或是向右移动,直到它的边缘碰到包含框或是另个浮动框的边框为止 特点 设置了浮动的元素不占原来的位置(不在标准流) 可以让块级元素在一行显示 浮动可以行内元素为块元素 注意:转化过程尽可能用display转化 属性值 清除浮动 额外标签法 <style> outer{border:1px solid black; width:3

css基础(浮动 清除f浮动)

文档流(标准流) 1.元素自上而下,自左而右 2.块元素,独占一行,行内元素在一行上显示,碰到父级元素的边框换行 浮动left 浮动的框可以向左或是向右移动,直到它的边缘碰到包含框或是另个浮动框的边框为止 特点 设置了浮动的元素不占原来的位置(不在标准流) 可以让块级元素在一行显示 浮动可以行内元素为行内块元素 注意:转化过程尽可能用display转化 浮动的用途 文本绕图 <head> <meta charset="UTF-8"> <title>&

CSS——如何清除浮动

众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div.A(这个就是说页面中有一个div,并且把其命名为class="A")中包含了两个或多个子元素div.B,div.C,div.D(这里我以三个为例),并且此时div.B和div.C进行浮动,而div.D不进行任何浮动,此时你可以看到父元素div.A高度仅靠div.D来撑开其高度,如果您将di

web前端入门到实战:css基础-float浮动

float实现文字环绕图片效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float</title> <style> body{ font-family: '微软雅黑'; } .per{ width: 400px; border: 1px solid #CCC; padding: 5p

CSS中清除浮动的两种方式

在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: 1 <div class="father"> 2 <div class="div1">1</div> 3 <div class="div2">2</div> 4 <div class="div3

CSS clear清除浮动

1.CSS中的clear有四个参数: none:允许两边都可以浮动. left:不允许左边有浮动. right:不允许右边有浮动. both(默认):不允许有浮动. 2.一开始在CSS中clear浮动是默认both,也就是说一开始不能有浮动的. 3.使用的案例:假设我清除第三个DIV的浮动 <style type="text/css"> div{ border:1px solid red; float:left; clear:none; } #msg_Div{ width:

div+css之清除浮动

1.对父级设置适合CSS高度对父级设置适合高度样式清除浮动,这里对“.divcss5”设置一定高度即可,一般设置高度需要能确定内容高度才能设置.这里我们知道内容高度是100PX+上下边框为2px,这样具体父级高度为102px 2.clear:both清除浮动 为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“</div>”结束前加此div引入“class="clear"”样式.这样即可清除浮动.

CSS之清除浮动

一.清除浮动的目的. 1.当一个父元素的高度不写或为auto时,而且这个父元素内又有浮动的子元素,那么这时候该父元素的高度将不会自动适应子元素的高度,也可以说高度是0px; 有如下代码: <div class="divp" style="width:300px; background:red; border:3px solid #000000;"> <div style="height:300px;float:left; backgrou