CSS教程：div设置float后高度不自动增加

2016-02-19 23:26 15 1 收藏

图老师小编精心整理的CSS教程：div设置float后高度不自动增加希望大家喜欢，觉得好的亲们记得收藏起来哦！您的支持就是小编更新的动力~

【 tulaoshi.com - Web开发】

相关文章：http://www.webjx.com/css/divcss-4952.html

　　　　http://www.webjx.com/css/divcss-5991.html

本来想把这个题目修改为闭合浮动元素或清除浮动元素，但想了一下，还是不修改为好。因为从这个题目我们可以更加容易的看出，如果您没有闭合(清除)浮动元素，它将造成的后果是-----div的高度不能自动增加。

言归正传
目前用来清除闭合(清除)浮动的方法，主要是一下四种：

1. 额外标签法

这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签。
我个人不喜欢这种方法，但是它确实是W3C推荐的方法

div style="clear:both;"/div

或者使用

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）br style="clear:both;" /

2.    使用after伪类

这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个点，因为它比较小不太引人注意。然后我们再利用它来清除浮动（闭合浮动元素），并隐藏这个内容。
这种方法兼容性一般，但经过各种 hack 也可以应付不同浏览器了，同时又可以保证html 比较干净，所以用得还是比较多的。
#outer:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}

3.    设置overflow为hidden或者auto

这种做法就是将父容器的overflow设为hidden或auot就可以在标准兼容浏览器中闭合浮动元素.
不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面

4.    浮动外部元素，float-in-float

这种做法就是让父容器也浮动，这利用到了浮动元素的一个特性浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果，但缺点也很明显父容器未必想浮动就浮动的了，毕竟浮动是一种比较特殊的行为，有时布局不允许其浮动也很正常。
个人不是很赞成这种做法，但是从dudo最后的总结总可以看出，他好像很赞成这种做法

来源:http://www.tulaoshi.com/n/20160219/1629912.html

上一篇： DIV CSS布局浏览器兼容的问题
下一篇： win10收费吗？

看过《CSS教程：div设置float后高度不自动增加》的人还看了以下文章更多>>

css实例教程:理解Float的含义

标签： Web开发

课程关键词：浮动页面布局有两种方式 1）浮动Float 2）定位Position 今天就来一个小小的练习，让大家理解Float的含义要求： 1）两个方块，一个红色#900，一个蓝色#009； 2）红色方块宽度和高度均为200像素，蓝色方块宽度为300像素，高度为200像素； 3）红色方块蓝的上外边距(margin-top)和左外边距(margin-left)均为20像素；页面效...

CSS实例教程:浮动(float)页面布局

标签： Web开发

前四节的大练习大家做的怎么样？有没有难度，如果你觉着有难度没有关系，这节课，我带着大家做一下这个练习！我们先来分析一下这个页面页面主要分5大块，顶部的Logo、导航条Nav、Banner、Content、Footer，如下图这样HTML就很容易写出来了 div id="Logo"/div div id="Nav"/div div i...

DIV+CSS相册制作教程

标签： Web开发

以前用FLASH作过一个FLASH相册—网络版这个效果有点学这个的意思。为了一行了的代码，我已经花了两个晚上来想了，结果下来就是感觉IE有点变态。用正常的想法去作，FIREFOX 等浏览器都没有问题，只有IE不可以。只有加那么一行垃圾代码，IE才能正常显示。以下就是效果： !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E...

360安全卫士如何设置不自动升级

360安全卫士如何设置不自动升级有没有这种经历，某天开机后打开360安全卫士，一看不认识了?原来是软件自动升级了。每一个版本都有一批忠实的用户，如非特殊情况有些人根本不乐意升级。今天就教大家把软件中的自动升级关掉。 1、首先打开360安全卫士，右上角一个小箭头，选择设置。 2、在设置的升级方式窗口下的升级方...

CSS教程:div仿框架方法

标签： Web开发

参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 操作系统：Windows 问这样的问题的人很多，我对此有比较深入的研究，但自己从来没有给出过完整的解答与分析，觉得有些对不住列祖列宗。先请看demo：运行代码框 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o...

查看更多精彩>>