网页中，经常用浮动的div来布局，但是会出现父元素因为子元素浮动引起内部高度为0的问题，为了解决这个问题，我们需要清除浮动，下面介绍4中清除浮动的方法。

　　在CSS中，clear属性用户清除浮动，语法：选择器{ clear: left || right || both; };

方法一：额外标签法

　　在浮动元素末尾添加一个空的标签，如：<div style="clear: both"></div>

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         .box1 {

             width: 600px;

             background-color: gray;

         }

         .box2 {

             width: 600px;

             height: 200px;

             background-color: purple;

         }

         .son1 {

             width: 150px;

             height: 100px;

             background-color: skyblue;

             float: left;

         }

         .son2 {

             width: 250px;

             height: 100px;

             background-color: hotpink;

             float: left;

         }

     </style>

 </head>

 <body>

     <div class="box1">

         <div class="son1"></div>

         <div class="son2"></div>

         <!-- 额外标签法 -->

         <div style="clear: both;"></div>

     </div>

     <div class="box2">

     </div>

 </body>

 </html>

方法二：父级添加overflow属性法

　　给父级添加overflow属性，触发BFC的方式，可以实现清除浮动效果。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         .box1 {

             width: 600px;

             background-color: gray;

             overflow: hidden;

         }

         .box2 {

             width: 600px;

             height: 200px;

             background-color: purple;

         }

         .son1 {

             width: 150px;

             height: 100px;

             background-color: skyblue;

             float: left;

         }

         .son2 {

             width: 250px;

             height: 100px;

             background-color: hotpink;

             float: left;

         }

     </style>

 </head>

 <body>

     <!-- 父级添加overflow属性法 -->

     <div class="box1">

         <div class="son1"></div>

         <div class="son2"></div>

     </div>

     <div class="box2">

     </div>

 </body>

 </html>

方法三：使用after伪元素法

　　使用:after方式，为第一种方法的升级版。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         .box1 {

             width: 600px;

             background-color: gray;

         }

         .box2 {

             width: 600px;

             height: 200px;

             background-color: purple;

         }

         .son1 {

             width: 150px;

             height: 100px;

             background-color: skyblue;

             float: left;

         }

         .son2 {

             width: 250px;

             height: 100px;

             background-color: hotpink;

             float: left;

         }

         .clearfix:after {

             content: ".";   /*内容为小点，尽量加不要空，否则旧版本浏览器有空隙*/

             display: block;

             height: 0; /*高度为0*/

             visibility: hidden;/*隐藏盒子*/

             clear:both;/*清除浮动*/

         }

         .clearfix {

             *zoom: 1; /**代表ie6、7能识别的 zoom是ie6、7清除浮动的方法*/

         }

     </style>

 </head>

 <body>

     <div class="box1 clearfix">

         <div class="son1"></div>

         <div class="son2"></div>

     </div>

     <div class="box2">

     </div>

 </body>

 </html>

方法四：使用before和after双伪元素法

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         .box1 {

             width: 600px;

             background-color: gray;

         }

         .box2 {

             width: 600px;

             height: 200px;

             background-color: purple;

         }

         .son1 {

             width: 150px;

             height: 100px;

             background-color: skyblue;

             float: left;

         }

         .son2 {

             width: 250px;

             height: 100px;

             background-color: hotpink;

             float: left;

         }

         .clearfix:before, .clearfix:after {

             content: "";

             display: table; /*可以触发BFC BFC可以清除浮动*/

         }

         .clearfix:after {

             clear:both;/*清除浮动*/

         }

         .clearfix {

             *zoom: 1; /**代表ie6、7能识别的 zoom是ie6、7清除浮动的方法*/

         }

     </style>

 </head>

 <body>

     <div class="box1 clearfix">

         <div class="son1"></div>

         <div class="son2"></div>

     </div>

     <div class="box2">

     </div>

 </body>

 </html>

　　

【Web】网页清除浮动的方法的更多相关文章

  1. css清除浮动的方法汇总

    这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...

  2. 彻底理解浮动float CSS浮动详解 清除浮动的方法

    我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流.   注意:标准流使我们网页布局中最稳定的一种结构 ...

  3. css清除浮动float方法

    转载:http://www.cnblogs.com/ForEvErNoME/p/3383539.html 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的 ...

  4. css清除浮动的方法总结

    在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下     清除浮动是每一个 we ...

  5. 详细解读css中的浮动以及清除浮动的方法

    对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读:   1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮 ...

  6. 前端开发CSS清除浮动的方法有哪些？

    在前端开发过程中,非IE浏览器下,当容器的高度自动,并且容器内容中有浮动元素(float为left或right),此时如果容器的高度不能自适应内容的高度,从而使得内容溢出破坏整体布局,这种现象叫做浮动 ...

  7. CSS清除浮动float方法总结

    使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...

  8. 关于CSS中清除浮动的方法

    在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...

  9. 8种CSS清除浮动的方法优缺点分析

    为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让 ...

随机推荐

  1. springboot1 缓存前端

    @Configurationpublic class WebMvcConfig extends WebMvcConfigurerAdapter { public void addResourceHan ...

  2. contextlib 上下文管理器

    在Python中,读写文件这样的资源要特别注意,必须在使用完毕后正确关闭它们.正确关闭文件资源的一个方法是使用try...finally: try: f = open('/path/to/file', ...

  3. centos磁盘满了，查找大文件并清理

    今天发现vps敲入crontab -e 居然提示 “Disk quota exceeded” 无法编辑.于是"df -h"查了查发现系统磁盘空间使用100%了.最后定位到是/var ...

  4. 189. Rotate Array(Array)

    Rotate an array of n elements to the right by k steps. For example, with n = 7 and k = 3, the array ...

  5. Shell教程 之字符串

    1.Shell字符串 字符串是shell编程中最常用最有用的数据类型(除了数字和字符串,也没啥其它类型好用了),字符串可以用单引号,也可以用双引号,也可以不用引号. 1.1 单引号 str='I am ...

  6. 两种方法修改pyhton爬虫的报头

    方法一: import urlib.request url = "" headers=("User-Agent","") opener = ...

  7. TZOJ 2018 SPF(连通图割点和分成的连通块)

    描述 Consider the two networks shown below. Assuming that data moves around these networks only betwee ...

  8. 【校招面试 之 C/C++】第14题 C++ 内存分配方式详解——堆、栈、自由存储区、全局/静态存储区和常量存储区（堆栈的区别）

    栈,就是那些由编译器在需要的时候分配,在不需要的时候自动清除的变量的存储区.里面的变量通常是局部变量.函数参数等.在一个进程中,位于用户虚拟地址空间顶部的是用户栈,编译器用它来实现函数的调用.和堆一样 ...

  9. MapperScannerConfigurer 自动扫描 将Mapper接口生成代理注入到Spring

    Mybatis在与Spring集成的时候可以配置 MapperFactoryBean来生成Mapper接口的代理. 例如 <bean id="userMapper" clas ...

  10. 各个JSON技术的比较（Jackson，Gson，Fastjson）的对比

    JSON技术的调研报告 一 .各个JSON技术的简介和优劣 1.json-lib json-lib最开始的也是应用最广泛的json解析工具,json-lib 不好的地方确实是依赖于很多第三方包, 包括 ...