关于float高度塌陷问题

和所有刚入门的菜鸟一样，我发现float有高度塌陷问题，又很偶然的发现float元素后加<img/>能消除float带来的破坏性。

后来百度了一下，大部分的float高度塌陷问题都没有提及img带来的影响。

解决高度塌陷问题方法：

1.在最后一个元素后加入<div style="clear:both">

2.father-div设置高度

3.父元素加上after伪元素：

其中第三种方法的效果是最好的，和<img/>差不多，不过好像还是after比较优一点。

时间： 2024-11-06 12:08:58

关于float高度塌陷问题的相关文章

float高度塌陷问题解决方案

第一种方案 BFC(Block Formatting Context) 块级格式化环境/布局环境 BFC是CSS中的一个隐含属性,开启BFC该元素会变成一个独立的布局区域元素开启BFC的特点: 1.开启BFC元素不会被浮动元素覆盖 2.开启BFC元素子元素和父元素外边距不会重叠 3.开启BFC的元素可以包含浮动子元素开启BFC的方式: 1.设置元素的浮动(不推荐) 2.将元素设置为行内块元素(不推荐) 3.将元素的overflow设置为一个非visible的值(副作用较小) 常用方式为ove

[转]CSS: inline-block的应用和float块高度塌陷

普通流高度塌陷: 当块float浮动时,不会对块布局产生影响,块仍然会按照左右或者上下的顺序排列.但是会影响文档的排列,当文档的高度超过块的高度时,块的高度会产生塌陷现象. 高度塌陷解决方法: 闭合浮动: 1.在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”> 2.<br clear="all" />原理类似上面 3.父元素设置 overflow:hidden; 在IE6中需要出发hasLayout,例如zoom:1.缺点: 会

css 子元素设置float,父元素高度塌陷

以div元素为例.div元素的高度会通过内容自动撑开.也就是说,内容有多少,高度就有多高.但是当内部元素设置了float属性之后,会是父元素高度塌陷 <div class="container"> <p>Hello World!Hello World!</p> <div class="clearfix"></div> </div> 清除浮动的方法父元素底部添加空div,然后在添加属性clear

css float父元素高度塌陷

css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题以下几个方法可以解决float 父元素高度消失/塌陷的问题 .clearfix:after{content:'';display:block;height:0;overflow:hidden;clear:both;} .clearfix {*zoom:1} 更好的方法是 .clearfix:after{content:'';dis

float浮动后，父级元素高度塌陷和遮盖问题

当子元素不浮动的时候,父元素的高度是由子元素撑起来的. 子元素A和B是两个div,独占一行效果如图: 当子元素B浮动起来之后,父元素高度塌陷到只剩子元素A的高度效果如图: 当给子元素A(div)设置CSS属性:display:inline 后,A的宽高将不起作用,宽高由内容撑开,即被字母A撑开.此时父级元素高度没有塌陷到和A一样,而是和B的高度一样效果如图: 当子元素A和B同时浮动起来之后,A的CSS属性:display:inline失效,效果为float的效果,同时父级元素的高度彻底塌陷

float浮动造成高度塌陷的解决办法

Float是我们在页面布局中常用的,也是非常重要的一个属性,可以让页面布局变得更加灵活. 但是在继续学习之后,尤其是掌握了宽高自适应之后,我们常常会发现一个奇怪的现象:如果父元素没有设置高度,而子元素都浮动了的话,父元素就“瘪”了. 就像下面这样 <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css">

浮动高度塌陷

## 浮动 - 使用float设置元素浮动 - 可选值 - none 默认值. 元素不浮动 - left 元素向左浮动 - right 元素向右浮动 - 浮动的特点: - 当元素设置浮动后,元素会向页面左上或右上浮动 - 当浮动元素遇到父元素边框后, 会停止浮动 - 当浮动元素遇到其他浮动元素时,会停止浮动 - 如果浮动元素上是一个没有浮动的块元素,浮动元素不会超过它 - 浮动元素不会超过它上边浮动的兄弟元素 - 浮动元素不会覆盖文字. 文字会环绕在浮动元素周围 - **浮动元素会完全脱离文档流

CSS中的浮动、高度塌陷以及清楚浮动

一.CSS浮动浮动(float)的框可以左右移动,直至它的外边缘碰到包含框或另一个浮动框的外边缘.浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到块级元素的布局而只会影响内联元素(通常是文本)的排列,文档中的普通流就表现得如同浮动框不存在一样.当浮动框高度超出包含框的时候,就会出现包含框不会自动升高来闭合浮动元素("高度塌陷"现象). <!DOCTYPE html> <html> <head> <style type="t

CSS高度塌陷

问题描述:当父元素只包含浮动的元素的时候,且父元素没有设置高度,如果父元素设置了边框border,那么看起来子元素不在父元素之内. 比如这样: html: <div id="parent"> <div class="left"></div> <div class="right"></div> </div> CSS: div { border: 2px solid #000;