清除浮动(float)

1.定义和用法

　　在w3c中给了浮动这样的定义。

　　"float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素"。

　　如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

　　注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

　　通俗的来讲，浮动就是让默认标准文档流下的元素漂浮起来并水平排列。

　　让图像右浮动：img { float:right; }

　　值：

left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

2.浮动所带来的影响

　　1) 行内元素浮动之后可以支持宽高;

　　2) 文本会给浮动定位的元素让位(可以以此制作文本绕排的效果);

　　3) 在父级没有给高度的情况下,子级浮动后父级会没有高度;

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>内容生成清除浮动</title>

        <style type="text/css">

            #container{

                border: 1px solid #000;

                padding: 20px;

                background-color: #0000FF;

            }

            #d1,#d2,#d3{

                width: 100px;

                height: 100px;

                line-height: 100px;

                text-align: center;

                border: 1px solid #000;

                margin: 10px;

                float: left;

            }

        </style>

    </head>

    <body>

        <div id="container">

            <div id="d1">1</div>

            <div id="d2">2</div>

            <div id="d3">3</div>

        </div>

    </body>

</html>

　如图,一般来说父级中的内容会将其高度撑起来,但图中并没有;

3.清除浮动

　　如何清除浮动,这里介绍4种方法:

　　1) 在父级的最后添加一个空的div,添加clear属性;　　　

<body>

        <div id="container">

            <div id="d1">1</div>

            <div id="d2">2</div>

            <div id="d3">3</div>

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

        </div>

    </body>

　　这里不推荐使用这种方法,因为会在页面添加无用的标签,会使页面布局复杂化;

　　2) 给父级设置overflow:hidden;(溢出隐藏)

　　　　会触发bfc(block formatting context)--块级格式化上下文;　　

<body>

        <div style="overflow:hidden">

            <div id="d1">1</div>

            <div id="d2">2</div>

            <div id="d3">3</div>

        </div>

</body>

　　　　同样也不推荐使用,因为这个属性与定位一起使用时会有副作用.

　　3)使用伪元素after(推荐使用)

.clearfix:after{

    content:"";    /*内容为空*/

    height:;  /*高度为0*/

    line-height:;  /*行高为0*/

    display:block;  /*块级元素*/

    visibility:hidden;  /*隐藏*/

    clear:both;   /*行高为0*/

}

.clearfix{

    zoom:;   /*兼容IE678*/

}

<div class="clearfix" > 
   <div id="d1">1</div> 
   <div id="d2">2</div> 
   <div id="d3">3</div>
</div>

　　4) 使用双伪元素:after和before(不推荐使用,不严谨)

.clearfix:after ,clearfix:before{

    content:"";

    display:table;

    clear:both;

}

.clearfix{

    zoom:1;   /*兼容IE678*/

}

如何清除浮动(float)所带来的影响的更多相关文章

【转】css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...
css清除浮动float的几种方法
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度, ...
css清除浮动float
css清除浮动float 1.分析HTML代码 <div class="outer"> <div class="div1">1</ ...
更优雅的清除浮动float方法
上篇文章是利用 :after 方法清除浮动float(作用于浮动元素的父元素上). ; } //为了兼容性,因为ie6/7不能使用伪类,所以加上此行代码. .outer:after {;;visibi ...
css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？一起来$('.float')
一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class=&quo ...
css清除浮动float的三种方法总结
原文地址: http://my.oschina.net/leipeng/blog/221125 张大神的解析: http://www.zhangxinxu.com/wordpress/2010/01/ ...
css清除浮动float方法
转载:http://www.cnblogs.com/ForEvErNoME/p/3383539.html 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的 ...
清除浮动float (:after方法)
1. 什么时候需要清除浮动?清除浮动有哪些方法? (1)对元素进行了浮动(float)后,该元素就会脱离文档流,浮动在文档之上.在CSS中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是 ...
CSS清除浮动float方法总结
使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...

随机推荐

面试官问我，使用Dubbo有没有遇到一些坑？我笑了。
前言 17年的时候,因为一时冲动没把持住(当然最近也有粉丝叫我再冲动一把再更新一波),结合面试题写了一个系列的Dubbo源码解析.目前公众号大部分粉丝都是之前的粉丝,这里不过多介绍. 根据我的面试经验 ...
子弹短信光鲜的背后：网易云信首席架构师分享亿级IM平台的技术实践
本文原文内容来自InfoQ的技术分享,本次有修订.勘误和加工,感谢原作者的分享. 1.前言自从2018年8月20日子弹短信在锤子发布会露面之后(详见<老罗最新发布了“子弹短信”这款IM,主打熟 ...
idea 过段时间java程序包不存在问题？
有时候我们在导入程序之后,系统会给出错误提示:Java:程序包xxxx不存在,现在我这里有一招,就是使用IDEA自动导入Java程序包,这也是IDEA的一大优点. 但是在看到这个问题的文章的时候,并不 ...
MySql事务的隔离级别及作用
逻辑工作单元遵循一系列(ACID)规则则称为事务. 原子性:保证事务是一系列的运作,如果中间过程有一个不成功则全部回滚,全部成功则成功.保证了事务的原则性. 一致性:一致性指的是比如A向B转100块钱 ...
python-图像处理（映射变换）
做计算机视觉方向,除了流行的各种深度学习算法,很多时候也要会基础的图像处理方法. 记录下opencv的一些操作(图像映射变换),日后可以方便使用先上一张效果图图二和图三是同一种方法,只是变换矩阵不 ...
[原创]K8Cscan插件之C段旁站扫描\子域名扫描
[原创]K8 Cscan 大型内网渗透自定义扫描器 https://www.cnblogs.com/k8gege/p/10519321.html Cscan简介:何为自定义扫描器?其实也是插件化,但C ...
ionic cordova platform add android Cordova failed to install plugin Error: ENOENT: no such file or directory AndroidManifest.xml
问题描述: 在ionic 项目中出现编译android 的时候出现 Cordova failed to install plugin Error: ENOENT: no such file or ...
微服务架构下分布式事务解决方案——阿里GTS
1 微服务的发展微服务倡导将复杂的单体应用拆分为若干个功能简单.松耦合的服务,这样可以降低开发难度.增强扩展性.便于敏捷开发.当前被越来越多的开发者推崇,很多互联网行业巨头.开源社区等都开始了微服务 ...
SkyWalking-netcore
详细安装步骤:https://www.jianshu.com/p/3ddd986c7581?from=groupmessage SkyWalking-netcore 官网:https://github ...
Linux编程 10 (shell外部命令与内建命令，alias ，type命令)
一. 内部命令 Linux命令有内部命令(内建命令)和外部命令之分,内部命令和外部命令功能基本相同,但也有些细微差别.内部命令不需要使用子进程来执行,它们已经和shell编译成一体,作为shell工 ...