周五去听css样式的培训，讲到float导致div不能被撑开的问题，特记录如下：

在写HTML代码的时候，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。

代码：

<html>
<body>

<div style="border:2px solid red;" class0="clearfix">
<div style="float:left;width:80px;height:80px;border:1px solid blue;">DIV1</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">DIV2</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">DIV3</div>
</div>

</body>
</html>

显示效果：

大家可以看到，作为外部容器的边框为红色的DIV，没有被撑开。

这是因为内部的DIV因为float:left之后，就丢失了clear:both和display:block的样式，所以外部的DIV不会被撑开。

我们想让外部容器的DIV随着内部DIV增多而增加高度，要怎么解决呢？

解决办法：

代码：

<html>
<body>

<style>
.clearfix:after {
content: " ";
display: block;
clear: both;
height: 0;
}
.clearfix {
zoom: 1;
}
</style>

<div style="border:2px solid red;" class="clearfix">
<div style="float:left;width:80px;height:80px;border:1px solid blue;">DIV1</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">DIV2</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">DIV3</div>
</div>

</body>
</html>

显示效果：

CSS：清除浮动的更多相关文章

  1. css清除浮动大全共8种方法

    原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...

  2. DIV+CSS 清除浮动方法总结

    DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...

  3. CSS清除浮动八种方法

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

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

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

  5. css清除浮动定位造成的异常

    清除浮动是为了解决高度塌陷的问题:内层有好几个div有宽有高,并且选择了浮动定位,但是外层的div却并没有设置宽高.在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动( ...

  6. 【转】CSS清除浮动_清除float浮动

    CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...

  7. 什么是CSS清除浮动？

    在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外 ...

  8. CSS清除浮动的方法

    CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...

  9. css 清除浮动 兼容IE+, FF

    上代码: <!doctype html> <html> <head> <meta charset="utf-8"> <titl ...

  10. CSS清除浮动各种方法

    当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现 ...

随机推荐

  1. T2639 约会计划 codevs

    http://codevs.cn/problem/2639/ 题目描述 Description cc是个超级帅哥,口才又好,rp极高(这句话似乎降rp),又非常的幽默,所以很多mm都跟他关系不错.然而 ...

  2. 转：HtmlCxx用户手册

    1.1 简介 使用由KasperPeeters编写的强大的tree.h库文件,可以实现类似STL的DOM树遍历和导航. 打包好的Css解析器. 看似很像C++代码的C++代码(其实已不再是C++了) ...

  3. oracle存储过程中使用字符串拼接

    1.使用拼接符号“||” v_sql := 'SELECT * FROM UserInfo WHERE ISDELETED = 0 AND ACCOUNT =''' || vAccount || '' ...

  4. RMA Sales Order – Stuck with “Awaiting Return Disposition”

    RMA Sales Order – Stuck with “Awaiting Return Disposition” Action : (Prod) ð  Login to Unix ð  su – ...

  5. react+flask+antd

    待学习: 1.https://www.cnblogs.com/jlj9520/p/6625535.html 2.http://python.jobbole.com/87112/ 3.

  6. 深度神经网络多任务学习(Multi-Task Learning in Deep Neural Networks)

    https://cloud.tencent.com/developer/article/1118159 http://ruder.io/multi-task/ https://arxiv.org/ab ...

  7. Leetcode第1题至第10题 思路分析及C++实现

    笔者按照目录刷题,对于每一道题,力争使用效率最高(时间复杂度最低)的算法,并全部通过C++代码实现AC.(文中计算的复杂度都是最坏情况复杂度) 因为考虑到大部分读者已经在Leetcode浏览过题目了, ...

  8. time machine不备份指定文件夹

    osx中常常会使用timemachine来备份一些文件,timemachine能够使某个文件夹恢复到之前某个时刻的状态,很的方便.但是备份须要空间,特别是有些我们并不想备份一些无关紧要的文件,比方电影 ...

  9. java中简单字符替换

    在网络编程中,假设URL含有特殊字符,如空格.'#'等,server将无法识别导致无法获得正确的參数值.我们须要将这些特殊字符转换成server能够识别的字符,比如将空格转换成'%20'.给定一个字符 ...

  10. 小博客| 登录 | 注册 | 留言 | 提Bug 小博客

     浏览(1502)  赞(29) 一直以来都想开发一个自己的网站,总想做一个网站然后让千千万万的人去访问,去使用,然后收到热烈的好评, 再然后某某著名机构有意投资我的网站(其实收购也是没有问题的), ...