浮动是一个非常好用的属性，但是有时会出现一些问题，需要进行清除浮动。例如

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .fa {

            background-color: red;

            width: 600px;

            /* height: 600px; */

        }

        .son1 {

            width: 200px;

            height: 200px;

            background-color: aqua;

            float: left;

        }

        .son2 {

            width: 300px;

            height: 200px;

            background-color: pink;

            float: left;

        }

        .div2 {

            width: 700px;

            height: 100px;

            background-color: orange;

        }

    </style>

</head>

<body>

    <div class="fa">aaa

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

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

    </div>

    <div class="div2"></div>

</body>

</html>

在父盒子没有给出高度的情况下，子盒子浮动不会将父盒子撑开来。

清除浮动使用clear:left|right|both 一般使用clear：both，具体方法如下：

1、在浮动标签后边添加一个额外的clear标签例如<div style="clear:both"></div>这样做的方法
例如

<body>

    <div class="fa">aaa

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

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

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

    </div>

    <div class="div2"></div>

</body>

结果如下，这种方法简单明了，但是会增加额外的标签

2、父级添加overflow:hidden|auto|scroll 
在.fa 的css属性中增加overflow:hidden ，结果也如上图所示，例如

.fa {

            background-color: red;

            width: 600px;

            overflow: hidden;

        }
这种方法方便快捷，但是元素内容多时易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

3、使用after伪元素进行清除浮动

   .clearfix:after {

            content: ".";

            /* 最好给content制定一个值防止旧版浏览器有空隙 */

            display: block;

            height:;

            visibility: hidden;

            clear: both;

        }

        .clearfix {

            *zoom:;

            /* 星号代表是ie6、ie7能识别的特殊符号

            zoom 是ie6、ie7清除浮动的方法*/

        }

这样给父盒子增加一个clearfix  类即可实现1中的图片效果。

4、同时使用after和before清除浮动
        .clearfix:before,

        .clearfix:after {

            content: "";

            display: table;

        }

        .clearfix:after {

            clear: both;

        }

        .clearfix {

            *zoom:;

        }

用法和方法三一样，给父元素增加clearfix 类即可

第3、4种方法都是目前常用的方法，不增加多余标签，但是ie6和ie7不支持after，需要使用zoom：1来清除浮动

 

CSS 小结笔记之清除浮动的更多相关文章

  1. CSS 小结笔记之浮动

    在css中float是一个非常好用的属性,float最基本用法是用来做文字环绕型的样式的. 基本用法:float:left | right 例如 <!DOCTYPE html> <h ...

  2. CSS 小结笔记之解决flex布局边框对不齐

    在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE htm ...

  3. [Web 前端] CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法

    cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...

  4. CSS（一）清除浮动

    问题1:关于清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  5. CSS(7)--- 通俗讲解清除浮动

    CSS(7)--- 通俗讲解清除浮动 上一篇讲了CSS浮动 博客地址:CSS(6)---通俗讲解浮动(float) 一.理解清除浮动 1.为什么要清除浮动 我们前面说过,浮动本质是用来做一些文字混排效 ...

  6. CSS 的overflow:hidden (清除浮动)

    verflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很 了解.一提到清除浮动,我们就会想到另外一个CSS样式: ...

  7. 「CSS」常见的清除浮动方法

    下面介绍几种清除浮动的方案,供大家参考: 使用额外的标签clear:both .parent {padding: 10px;width: 200px;background: red;} .child ...

  8. CSS 小结笔记之BFC

    BFC 即为Block formatting context 的缩写,BFC 主要用来将一个盒子设置为一个隔离的容器,不管盒子内部的元素具有什么属性,都不会影响到盒子的外面. 1.哪些元素能产生BFC ...

  9. CSS 小结笔记之定位

    定位也是Css中一个非常强大的属性.定位主要是用来移动盒子,将其移动到我们想要的位置. 定位分为两部分 1.边偏移 left | right |top |bottom:偏移大小:(边偏移一般制定上就不 ...

随机推荐

  1. (转)Python - 字符串对齐

    https://zhuanlan.zhihu.com/p/33923344-----------Python小知识:用format格式化输出字符串 版权声明:本文为博主原创文章,未经博主允许不得转载. ...

  2. Spring Security构建Rest服务-1200-SpringSecurity OAuth开发APP认证框架

    基于服务器Session的认证方式: 前边说的用户名密码登录.短信登录.第三方登录,都是普通的登录,是基于服务器Session保存用户信息的登录方式.登录信息都是存在服务器的session(服务器的一 ...

  3. 解析ASP.NET Mvc开发之EF延迟加载 分类： ASP.NET 2014-01-04 01:29 4017人阅读 评论(1) 收藏

    目录: 从明源动力到创新工场这一路走来 解析ASP.NET WebForm和Mvc开发的区别 解析ASP.NET 和Mvc开发之查询数据实例 ----------------------------- ...

  4. 【树】Unique Binary Search Trees II

    题目: Given n, generate all structurally unique BST's (binary search trees) that store values 1...n. F ...

  5. Android 开发工具类 20_DOMPersonService

    xml 文件 <?xml version="1.0" encoding="UTF-8"?> <persons> <person i ...

  6. Attr.checkId()方法

    1.符号sym是TYP02 举个例子,如下: package bazola; class Point { // ... } class Tree<A> { class AttrVisito ...

  7. js函数技巧

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. WINCRIS的使用

    附件下载:http://pan.baidu.com/s/1sj7EsOH 1.首先大家先到官网上下载自己的BIOS , 准备一个U盘格式化成FAT/FAT32格式. (网上说U盘的大小不要超过2G,这 ...

  9. python 笔记-转

    python笔记   Python 学习笔记 - 14.技巧(Tips)   Python 学习笔记 - 13.异常(Exception)   Python 学习笔记 - 12.流程控制(Contro ...

  10. 使用Quartz.net来执行定时任务

    Quartz.net使用方法:http://www.cnblogs.com/lizichao1991/p/5707604.html 最近,项目中需要执行一个计划任务,组长就让我了解一下Quartz.n ...