`

html设置float后没有高度解决

阅读更多
http://www.chinaz.com/design/2008/1024/41932.shtml

2. 使用after伪类

这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”,因为它比较小不太引人注意。然后我们再利用它来清除浮动(闭合浮动元素),并隐藏这个内容。
这种方法兼容性一般,但经过各种 hack 也可以应付不同浏览器了,同时又可以保证html 比较干净,所以用得还是比较多的。

以下为引用的内容:
#outer:after{ 
     content:"."; 
     height:0; 
     visibility:hidden; 
     display:block; 
     clear:both; 
}



http://slide.tech.sina.com.cn/d/slide_5_453_44349.html#p=1
新浪的图片就是在div和里面的ul分别加入 .clearfix,  将clearfix设置为:
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;}
分享到:
评论

相关推荐

    Float(浮动)导致的父容器背景不显示的解决方法

    这种情况下,如果父元素没有设置高度(`height`),或者内容不足以填满整个父元素,那么父元素的高度将不会自动扩展以包含浮动的子元素,导致背景色、边框等无法延伸到浮动元素的下方,即出现“浮动塌陷”。...

    html div没有被撑开的原因及解决办法

    通过使用`lj_设置子dom的height 100%即可.png`、`必须清除子dom的float才能撑开父dom.txt`、`absolute存在的时候floate会失效.txt`、`css - div层为什么没有被自动撑开-.url`这些资源,你可以更深入地学习和实践这些...

    DIV设置float后父容器无法定位高度的问题解决方法

    其中一个典型的问题就是当内部的DIV元素使用了float属性后,可能会导致父容器无法正确计算高度,从而影响整体页面的布局。这个问题的出现,主要是因为浮动元素不再占据文档流空间,而父容器的高度是根据其内部元素的...

    高度塌陷的产生条件和解决方法

    高度塌陷是指父元素没有设置高度,而所有的子元素都是浮动的,这时候父元素就会出现高度塌陷的情况。这种情况下,父元素的高度将塌陷,无法正确地显示内容。例如,我们可以创建一个简单的HTML结构,父元素包含两个...

    html2:float布局

    - **高度塌陷**:当父元素内的所有子元素都浮动时,若父元素没有设定固定高度,可能会导致父元素的高度塌陷。这是因为父元素不再感知到浮动元素的高度。 ### 3. 清除浮动 为了解决高度塌陷问题,通常需要对浮动...

    浮动float深入了解

    3. `overflow`属性:将父元素的`overflow`设置为`hidden`或`auto`,也可以触发块级格式化上下文,从而解决高度塌陷。 五、浮动与响应式设计 随着响应式设计的发展,浮动在现代布局系统中的地位逐渐被Flexbox和Grid...

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

    当我们谈论“div设置float后高度不自动增加”的问题时,我们实际上是在讨论浮动元素(float elements)对父容器高度计算的影响。浮动元素常被用于创建响应式布局、创建多列布局或者实现图文环绕等效果。然而,当一个...

    css1--关于float的div撑不起父div的问题

    然而,当一个父元素的所有子元素都设置了`float`,父元素可能会失去其内容的高度,因为`float`元素不再参与标准流中的高度计算。这就产生了“父div无法被撑起”的问题。如果不解决,可能导致父元素下面的内容与浮动...

    css float文字的显示问题(兼容性)

    当一个父容器的所有子元素都设置了`float`,父容器可能会失去其高度,导致背景颜色、边框等无法正确显示。解决这个问题的方法通常有以下几种: 1. 添加clearfix类:通过添加一个特殊的类(如`.clearfix`),并应用...

    float讲解ppt

    PPT中应包含具体的HTML和CSS代码示例,演示如何设置`float`属性,以及如何解决可能出现的布局问题。这些示例将帮助读者直观地理解`float`在实际项目中的应用。 **内容四:响应式设计与float** 1. **响应式设计简介...

    CSS无难事-浮动floatright的应用和li的高度问题.pdf

    在“CSS无难事-浮动floatright的应用和li的高度问题”这个主题中,我们将探讨`float:right`的用法以及`<li>`元素高度问题的解决策略。 首先,让我们了解`float:right`。当将一个元素的`float`属性设置为`right`时,...

    float元素浮动后高度不一致导致错位的解决办方法

    总的来说,解决`float`元素高度不一致导致的错位问题有多种途径,可以根据项目需求、浏览器兼容性和代码可维护性选择合适的方法。随着Web技术的发展,Flexbox和Grid布局正逐渐成为更优的布局选择,但在一些旧项目或...

    详解关于浮动元素float使其父元素高度塌陷的原因及解决方法

    浮动元素在网页设计中是一种常见的布局技术,主要是通过设置`float`属性来实现元素的左右移动,以便在有限的空间内实现多列布局。然而,这种技术带来了一个问题,即浮动元素可能会导致其父元素的高度塌陷,也就是父...

    css float属性_动力节点Java学院整理

    - **浮动层**:当赋予元素`float`属性后,该元素会脱离文档流,根据`left`或`right`值进行左右浮动。这会导致元素在页面上的位置改变,且会影响其他非浮动元素的布局。 ### 3. 示例分析 #### 3.1 `float:left` ...

    文档流html开发中遇到的高度塌陷 浮动 定位产生的问题,.pptx

    总结起来,HTML和CSS中的高度塌陷、浮动和定位问题可以通过理解和应用BFC、创建清除浮动的方法来有效解决。在实际开发中,我们需要灵活运用这些技巧,以确保页面布局的稳定和预期效果。对于开发者来说,掌握这些基本...

    子Div使用Float后撑开父Div的几种方法

    - 为父元素添加一个类(class),并在CSS中通过这个类设置父元素的高度或最小高度,使父元素能够适应其内部浮动元素的高度。 最后,值得注意的是,这些方法主要针对的是较旧的浏览器,例如IE6、IE7和IE8等,因为...

    CSS-float详解[借鉴].pdf

    在提供的代码示例中,先是一个未解决浮动问题的例子,图片和文本都浮动,导致父容器`.news`没有正确包裹它们。接着,通过添加一个`clear: both`的空`div`解决了这个问题,但引入了额外的HTML。最后,通过让父容器`....

Global site tag (gtag.js) - Google Analytics