首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在div中使用"float:left"而不破坏包含元素的高度?

在div中使用"float:left"可能会导致父元素高度坍塌,但是可以通过以下方法解决这个问题:

  1. 使用clearfix的方法:在父元素中添加一个伪元素,并设置clearfix属性,可以清除浮动,从而避免高度坍塌的问题。
代码语言:css
复制
.parent::after {
  content: "";
  display: table;
  clear: both;
}
  1. 使用BFC的方法:将父元素设置为BFC(块格式化上下文),可以避免高度坍塌的问题。
代码语言:css
复制
.parent {
  overflow: hidden;
}
  1. 使用flex布局的方法:将父元素设置为flex布局,可以自动适应子元素的高度。
代码语言:css
复制
.parent {
  display: flex;
}
  1. 使用grid布局的方法:将父元素设置为grid布局,可以自动适应子元素的高度。
代码语言:css
复制
.parent {
  display: grid;
}

以上是常用的解决方法,可以根据具体情况选择合适的方法。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS技巧(一):清除浮动

在非IE浏览器(Firefox)下,当容器高度为auto,且容器内容中有浮动(floatleft或right)元素,在这种情况下,容器高度不能自动伸长以适应内容高度,使得内容溢出到容器外面影响...(甚至破坏)布局现象。...清除浮动方法 方法一:使用带clear属性元素 在浮动元素使用一个空元素,并在CSS赋予.clear{clear:both;}属性即可清理浮动.../p> 方法三:给浮动元素容器添加浮动 给浮动元素容器也添加上浮动属性即可清除内部浮动,但是这样会使其整体浮动,影响布局,推荐使用。...推荐 在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式;在小模块ul里使用overflow:hidden;(留意可能产生隐藏溢出元素问题);如果本身就是浮动元素则可自动清除内部浮动

80311

FLOAT坍塌原理及解决方案

简单地说,就是浮动会脱离普通流(属于一种比较‘特殊’脱离,其他内容还会围绕在浮动元素周围),并且创建了新BFC,元素不具备产生 BFC 条件,这时候父元素无法感知到它存在,所以它高度为0。...float坍塌解决方案 BFC会把它包含浮动元素高度也算在里面,也就是闭合浮动,大部分解决方案都是围绕着这个特性来实现。 1)....使用元素 :: after .parent-container::after {   content: "";  /* 空内容默认高度为0,避免生成内容破坏原有布局高度 */   display...添加空元素来清除浮动 //增加了无意义元素推荐 ...使用br元素 //增加了无意义元素推荐

43120
  • 详解 清除浮动 多种方式(clearfix)

    如果一个元素包含元素全部是浮动元素,那么该元素高度将变成0(高度塌陷) 3.如何清除浮动 解决方案 及 原理分析 方案1 直接设置父元素高度 优势:极其简单 弊端:必须要知道父元素高度是多少...; 生成元素以块级元素显示, clear:both; 清除前面元素浮动带来影响 相对于空标签闭合浮动方法 优势:破坏文档结构,没有副作用 弊端:代码量多 方案7 .cf:before...,.cf:after { content:""; display:table; } .cf:after { clear:both; } 优势:破坏文档结构,没有副作用 弊端: 代码量多...CSS2.1 表格模型元素,可能不会全部包含在除HTML之外文档语言中。这时,那些“丢失”元素会被模拟出来,从而使得表格模型能够正常工作。...overflow:hidden, 语义应该是溢出:隐藏,按道理说,子元素浮动了,但依然是在父元素元素高度塌陷,高度为0了,子元素应该算是溢出了,为什么没有隐藏,反而撑开了父元素高度

    1.5K60

    CSS布局(四) float详解

    初次接触“脱离文档流”朋友可以这样理解:div是父亲,img是它儿子,原本好好父子关系,原本爷俩可以体面的展示一个包含关系效果。直到有一天,img被设置了float。...老天爷(浏览器)规定,任何float元素都不允许再呆在自己家族,于是img被逐出家门,断绝和div父子关系。...如果给div增加float:left之后,它突然变得紧凑了,宽度发生了变化,把内容“王福朋”三个字包裹了——这就是包裹性。...为父元素添加overflow:hidden  这样父元素就有高度了 ,父元素高度便不会被破坏; 浮动父元素   这两个方法比较简单,在这里也就不再演示了,大家有兴趣可以自己去试试。   ...4.浮动应用(使用float做网页布局) 1.设置float属性后,元素实际上会inline-block块状化 2.可以去掉排列间空格 ? ?

    1.5K80

    Float 那些事

    破坏性   2.1 float元素不占据正常文档流空间     由于浮动块不在文档普通流,所以文档普通流块表现得就像浮动块不存在一样。     3块div均未加float ?     ...IE8和Firefox因为它不再处于文档流,所以它不占据空间,实际上覆盖住了块2,使块2从视图中消失。IE6和IE7紧跟在浮动元素块1块2也会跟着浮动。如下图 ? ?   ...2.2 浮动“塌陷”     对父元素影响:如果父元素包含浮动元素,且父元素未设置高度和宽度时候。那么它高度就会塌缩为零。 ?...解决方案     ① 在使用float元素元素结束前加一个高为0宽为0且有clear:both样式div 块1 float:left     ② 在使用float元素元素添加overflow:hidden;     ③ 使用after伪对象清除浮动 3. float与JavaScript   使用JavaScript

    98330

    CSS float浮动深入研究、详解及拓展(二)

    ,在这行元素,图片这个inline box高度最高,于是传递给了line box,line box是个真正意义上高度,直接作用于containing box(就是这里li元素,使li元素有一个高度...又是我反复提到,浮动破坏了inline box,也就是破坏高度,所以这里含有浮动属性li元素实际上是没有高度。所以呢,要是后面还有同样li标签的话,就会水平对齐排列。...IE下清除浮动准则很简单,使元素haslayout就可以了。宽度值,高度值,绝对定位,zoom,浮动本身都可以让元素haslayout。显然,首选zoom:1;不会干扰任何样式。...投机取巧法 就是直接一个放到当作最后一个子标签放到父标签那儿,此方法屡试不爽,兼容性强,使用方便,是初学时使用的上佳之选。...但是我从来不用,因为我看到是个巨大浪费,浪费了一个标签,而且只能使用一次,我个人是无法容忍,所以这个方法推荐。而且有时候一不留神中间多了个空格会产生一段空白高度

    59600

    CSS 清理浮动 clear属性

    这种塌陷会影响、甚至破坏布局,如果父元素没有边框,也包含任何可见背景,这个问题就很难被注意到,但它却是一个很重要问题。 再来看看浮动元素如何影响兄弟元素位置。...当容器高度为 auto,且只包含浮动元素时,如果浮动元素高度不相同,剩余空间足够容纳后面的元素时,后面的元素就会上跳到剩余空间。...footer { float: left; } main aside footer 上述布局为两栏布局,主栏向左浮动,侧栏向右浮动,并且侧栏高度小于主栏高度。...: box1 box2 如果你很明确知道接下来元素是什么,这个方法很不错,它不需要 hack,添加额外元素。但是,使用这种方法,必须确保浮动元素后面确实有元素。...: .clearfix { *zoom: 1; } 在这些属性值,zoom 用于设置元素缩放比例,取值 1 就会使用元素实际尺寸。

    18610

    【云+社区年度征文】2020一网打尽CSS世界

    css基线示意.png ex是CSS一个相对单位,指的是小写字母x高度,1ex指小写字母x高度。 内联元素默认是基线对齐基线通常指x底部。...border-color 没有指定时,会使用当前元素 color计算值 border 与透明边框 场景一:距离右下方50px background默认是相对于左上角,在宽度固定情况下,我们可以通过...float.png 包裹性; 块状化并格式化上下文; 破坏文档流; 没有任何margin合并; 高度塌陷 float最显著表现就是让父元素高度塌陷。...即,设置了clear属性元素自身如何如何,不是让float元素如何如何。...作用:该部分参考自(可通过链接查看示例):CSS重要BFC 阻止元素被浮动元素覆盖:设置一个元素float、display、position等值触发BFC,以阻止被浮动盒子覆盖; 可以包含浮动元素

    5K11

    前端基础篇之CSS世界

    (图中两个div行高一样,div.one 背景色区域就是行框盒子高度 div.two 背景区域则是实际高度,其行框盒子高度div.one 是一样。) ?...div元素高度仍然和上图一模一样,由字母x和行距共同撑起。此时如果删除字母x,div高度不变,因为span元素行框盒子前会产生幽灵空白节点,幽灵空白节点+行高也能撑起div。 ?...由于内联元素默认基线对齐,所以字母x和span元素发生了位移以使基线对齐,导致div高度变大。此时字母x半行距比span元素半行距大,大出部分就是div高度增加部分。...两个上下相邻BFC之间折不折叠要看具体情况,display: inline-block float: left不会折叠,overflow: hidden则会折叠。...第三,BFC盒子是与其包含 left edge 相接触,不是包含 left-border 相接触。left edge 正确翻译为左边缘。

    2.1K50

    了解BFC特性,轻松实现自适应布局

    2、BFC包含浮动元素,浮动会触发新BFC产生 3、已经确定BFC区域不会与相邻BFC浮动元素边距发生重合 针对以上几点我们来具体深究一下BFC特性到底有何区别,在什么样场景下会比较触发BFC...这也证实了相邻BFC与已经设置浮动元素边距并不会合并,但inner-box-2与inner-box-1始终在一个大BFC包裹着,每一个自身元素又形成一个独立BFC。...貌似456元素因为设置浮动破坏了BFC,所以我们需要给456设置特殊margin才行,于是乎你给456加一层div,然后设置margin: -10px 0并且要设置左浮动 .item-2 {...但是当我们给slide-left设置float:left后,我们会发现,此时slide-left文档流被破坏,main会紧贴着slide-left排列 .slide-left { width...} 此时我们可以观察到main贴着slide-left,宽度就是父级宽度 但实际上main是需要剩下宽度,他需要根据左侧slide-left宽度自适应 因此你可以,让main成为一个独立

    67550

    【CSS】323- 深度解析 CSS “浮动”

    复制代码 其实我个人理解,浮动造成最核心问题就是破坏了文档流,那么问题来了,float破坏了文档流,为什么还要设计这个api,我查了一些资料最后才知道,这是因为当初设计float目的是为了能实现文字能够环绕图片排版功能...第二个影响:影响了父容器高度,正常父元素高度是自适应高度为其包含内容总高度内部元素浮动造成了父容器高度塌陷。 第三个影响:父容器高度塌陷了,将会影响和父元素同级文档布局。...同时,父元素同级元素也会正常排列在伪元素形成块级元素后面,不受浮动影响。 ---- 下面是干掉clear属性后截图: ?...父元素使用 bfc 清除浮动,外部矛盾解决,内部矛盾还存在 ? 通过给父元素浮动元素后面的第一个同级块级元素设置 clear 清除浮动,内部矛盾解决,外部矛盾也解决。 ?...这些得需要根据业务特点来决定。其次,是使用 bfc 还是 clear 还是伪元素使用 bfc 的话使用哪种方式去触发。这也是根据业务特点来决定。

    98820

    小结CSSfloat属性

    3.浮动引发问题 3.1破坏性 这个在我一篇文章小结BFC基本知识与应用也提过:如果父元素元素都是浮动元素,那么父元素高度会发生高度塌陷。...导致这一现象原因在于: 应用了float元素会脱离文档流,即子元素都脱离了文档流,元素还处在正常文档流。自然,父元素不能被浮动子元素撑开,导致父元素高度塌陷为零。...IE 会扩展浮动来包含图片,突破伸出主内容之外把侧栏推到下面。 快速修正:确保不是图片造成这种情况,使用 overflow:hidden 来切除多余部分。...clear: both;         } 4.2使用空标签清除浮动 还是以上述为例,侧边栏、中间内容区域元素设置向左浮动(float:left;),为了清除浮动,把侧边栏、中间栏外包一层父元素,然后在父元素闭合标签前...;">      4.3触发BFC 还是以上述为例,侧边栏、中间内容区域元素设置向左浮动(float:left;),为了清除浮动,给包含浮动元素元素,设置overflow

    1.2K50

    HTML和CSS常见问题整理

    一个块级元素如果没有设置height,其height由子元素撑开,对子元素使用了浮动之后,子元素就会脱离文档流。那么父元素没有内容撑开其高度,这样父元素height就会被忽略。...如何清除 1、父元素设置overflow: hidden(少用) 2、clearfix:使用内容生成方式清除浮动,不会破坏文档流。...margin: auto } 方案二:float 自身浮动法 centerdiv需要放到后面,对左右使用float:leftfloat:right,float使左右两个元素脱离文档流,中间正常文档流...5.计算BFC高度,浮动元素也参与计算 BFC作用: 1.自适应两栏布局 2.可以阻止元素被浮动元素覆盖 3.可以包含浮动元素---清除内部浮动 原理:触发父divBFC属性...,使下面的子div都处在父div同一个BFC区域之内 4.分属于不同BFC时,可以阻止margin重叠 CSS3特性 vh和vw vh 相对于视窗高度,视窗高度是100vh vw 相对于视窗宽度

    1.5K30

    css面试点三:清除浮动方法-高度塌陷理解-伪元素使用

    浮动框不属于文档流普通流,当元素浮动之后,不会影响块级元素布局,只会影响内联元素布局 当包含高度小于浮动框时候,此时就会出现“高度塌陷”。 为什么要清除浮动?...清除浮动主要是为了解决,父元素因为子级元素浮动引起内部高度为0问题。 当父元素不给高度时候,内部元素不浮动时会撑开,浮动时候,父元素变成一条线。...高度塌陷 如果父元素包含浮动元素,且父元素未设置高度和宽度时候。...手动定义height,就解决了父级div无法自动获取到高度问题 缺点:只适合高度固定布局,要给出精确高度,如果高度和父级div不一样时,会产生问题 建议:推荐使用,只建议高度固定布局时使用 <...建议:推荐使用,如果你需要出现滚动条或者确保你代码不会出现滚动条就使用吧。

    95920

    脱离文档流分析(转)

    脱离文档流,也就是将元素从普通布局排版拿走,其他盒子在定位时候,会当做脱离文档流元素不存在进行定位。 只有绝对定位absolute和浮动float才会脱离文档流。  ...解决方法:要么都不使用浮动;要么都使用float浮动;要么对没有使用float浮动DIV设置margin样式。...同样,如果是box1向左浮动,box2和box1则会出现重叠,例5;但如果在box2设置clear:left;表示左侧不允许出现浮动元素,则box2同样会下移。 ?...如果没有明确设定包含容器高度情况下,它要计算内容全部高度才能确定在什么位置hidden,这样浮动元素高度就要被计算进去。这样包含容器就会被撑开,清除浮动。...这是相对定位一个主要用法,图文混排。 ? 注意,标签设置了position:relative;属性,设置left,right和top,bottom值,这些值则默认值为0。

    1.3K20

    小结CSSfloat属性

    3.浮动引发问题 3.1破坏性 这个在我上一篇文章小结BFC基本知识与应用也提过:如果父元素元素都是浮动元素,那么父元素高度会发生高度塌陷。...导致这一现象原因在于: 应用了float元素会脱离文档流,即子元素都脱离了文档流,元素还处在正常文档流。自然,父元素不能被浮动子元素撑开,导致父元素高度塌陷为零。...IE 会扩展浮动来包含图片,突破伸出主内容之外把侧栏推到下面。 快速修正:确保不是图片造成这种情况,使用 overflow:hidden 来切除多余部分。...clear: both; } 4.2使用空标签清除浮动 还是以上述为例,侧边栏、中间内容区域元素设置向左浮动(float:left;),为了清除浮动,把侧边栏、中间栏外包一层父元素,然后在父元素闭合标签前...(float:left;),为了清除浮动,给包含浮动元素元素,设置overflow:hidden;触发父元素生成BFC。

    5.1K1403

    浮动之后那些事儿 - 清浮动操作

    二、浮动之后发生那些事 浮动会导致当前元素脱离文档流,此时会对父级产生影响; 子元素浮动,父级元素会出现高度为0现象,这个现象叫做高度塌陷;即是上图所看到父级高度为0效果。...对于浮动元素来说,它们是能够撑开外部div高度,但是一旦浮动,也就意味着元素脱离文档流,父级div就相当于没有了内容。这时是没有办法实现内容撑开高度。...缺点:结构与表现未分离,推荐。 使用:br标签清除浮动类似空标签清浮动,同样在float元素后面加一个br标签,只不过br存在一个属性clear只要将br标签里clear属性设置成all即可。...5 after伪元素清浮动 借助伪元素来实现清浮动操作,当前开发中用最多存在,具体代码如下: .main div { float: left;...2) height: 0; 避免生成内容破坏原有布局高度。 3) Unicode: 字符里有一个“零宽度空格”,也就是U+200B,这个字符本身是不可见

    1.9K80

    前端硬核面试专题之 CSS 55 问

    正是因为浮动这种特性,导致本属于普通流元素浮动之后,包含框内部由于不存在其他普通流元素了,也就表现出高度为 0(高度塌陷)。...在实际布局,往往这并不是我们所希望,所以需要闭合浮动元素,使其包含框表现出正常高度。...float floatleft (或 right),向左(或右)浮动,直到它边缘碰到包含框或另一个浮动框为止。且脱离普通文档流,会被正常文档流内块框忽略。不占据空间,无法将父类元素撑开。...大家要注意 html 必须使用 div 标签,不要妄图使用什么 p 标签来达到目的。因为 div 有个默认属性,即如果设置宽度,那它会自动填满它父标签宽度。这里 main 就是例子。...常用清除浮动方法,则使用空标签,overflow,伪元素等。 在使用基于浮动设计 CSS 框架时,自会提供清除方法,个人并不习惯使用浮动进行布局。

    2K20

    掌握 CSS 浮动关键

    二、float 属性值 left:左浮动,元素靠上靠左排列。当一个元素设置为左浮动时,它会尽可能地向左移动,直到碰到包含边界或者其他浮动元素。 right:右浮动,元素靠上靠右排列。...同理,右浮动元素会尽可能地向右移动,直到碰到包含边界或者其他浮动元素。 默认值:none,即浮动。当元素float属性为默认值时,它会按照常规流方式进行排列。...例如,可以为浮动元素设置明确宽度和高度,以控制其大小。 (二)包含块 浮动元素包含块和常规流一样,是父元素内容盒。这决定了浮动元素在页面位置范围。...class="parent clearfix"> 左浮动元素 右浮动元素</div...这种方法优点是简单易用,不需要在 HTML 结构添加额外元素。同时,它也可以避免一些使用其他方法可能出现问题,清除浮动元素边距问题等。

    6510

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券