开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何让div增加高度，而不是先跳到左边浮动的div下面，然后再增加高度？

要让一个div增加高度，而不是先跳到左边浮动的div下面，然后再增加高度，可以使用以下方法：

使用clear属性：在需要增加高度的div后面添加一个空的div，并设置clear属性为left或both。例如：

<div style="float: left; width: 200px; height: 200px; background-color: red;"></div>
<div style="clear: left;"></div>
<div style="height: 300px; background-color: blue;"></div>

这样，第三个div会在第一个div的下方增加高度，而不会被第一个div的浮动影响。

使用overflow属性：将包含两个div的容器div设置overflow属性为auto或hidden。例如：

<div style="overflow: auto;">
  <div style="float: left; width: 200px; height: 200px; background-color: red;"></div>
  <div style="height: 300px; background-color: blue;"></div>
</div>

这样，容器div会自动包裹两个子div，并且第二个div会在第一个div的下方增加高度。

使用flex布局：将包含两个div的容器div设置display属性为flex，并使用flex-direction属性来控制子元素的排列方向。例如：

<div style="display: flex; flex-direction: column;">
  <div style="float: left; width: 200px; height: 200px; background-color: red;"></div>
  <div style="height: 300px; background-color: blue;"></div>
</div>

这样，容器div会以垂直方向排列两个子div，并且第二个div会在第一个div的下方增加高度。

以上是三种常用的方法，根据具体情况选择适合的方法来实现div增加高度而不受浮动div影响。

相关搜索:在双列页面上,如何使用CSS或Javascript将左div增加到右div的相同高度？如何从顶部而不是从底部增加div的高度？如何在上面增加文本视图的高度，而不是常规的底部？如何在向下滚动时平滑地降低div的高度，并在向上滚动时以相同的速度增加它？如何在独立移动项目时增加div所在的宽度或高度？如何增加div的高度以适应内容？如何才能让div在底部浮动，而不会在每次调整窗口大小时改变框的高度？如何让列表-组滚动到一个div中而不是包裹它的高度？mysql数据库项目如何搭建 mysql数据库分区注意事项

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

最全的常见css布局

常见的单列布局有两种： header,content 和 footer 等宽的单列布局 header 与 footer 等宽,content 略窄的单列布局 1.如何实现对于第一种，先通过对 header...overflow 触发 BFC,而 BFC 不会重叠浮动元素。...表格布局也是有缺陷:① 无法设置栏边距；② 对 seo 不友好；③ 当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，然而有时候这并不是我们想要的效果。 5.网格布局 <!...通过设置 margin-left 为负值让 left 和 right 部分回到与 center 部分同一行； center 部分增加一个内层 div，并设 margin: 0 200px； ③ 缺点多加一层...两种布局方式的不同之处在于如何处理中间主列的位置：圣杯布局是利用父容器的左、右内边距+两个从列相对定位; 双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整四、等高列布局等高布局是指子元素在父元素中高度相等的布局方式

1.7K1 0

详解清除浮动的多种方式（clearfix）

页面中的块级元素：按照从上到下的方式逐个排列页面中的行内元素：按照从左到右的方式逐个排列但是如何让多个块级元素在一行内显示?...如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0（高度塌陷） 3.如何清除浮动解决方案及原理分析方案1 直接设置父元素的高度优势：极其简单弊端：必须要知道父元素高度是多少...display:table-cell可以触发BFC，简单说就是，触发块级格式化上下文的是匿名框，而不是display:table。...overflow:hidden, 语义应该是溢出:隐藏，按道理说，子元素浮动了，但依然是在父元素里的，而父元素高度塌陷，高度为0了，子元素应该算是溢出了，为什么没有隐藏，反而撑开了父元素的高度？...当蓝色 div 增加 overflow:hidden; 时效果如下 ? 依据BFC布局规则第六条：计算BFC的高度时，浮动元素的高度也参与计算。

1.5K6 0

BFC背后的神奇原理

计算BFC的高度时，浮动元素也参与计算二、哪些元素会生成BFC?...根据BFC布局规则第3条：每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。　...因此，虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。　根据BFC布局规则第四条：　BFC的区域不会与float box重叠。...因为BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。...同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。原文

7901 0

块格式化上下文（BFC）布局规则及常见情景

根据BFC布局规则第3条：每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。...因此，虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。根据BFC布局规则第四条： BFC的区域不会与float box重叠。...根据BFC布局规则第六条：计算BFC的高度时，浮动元素也参与计算为达到清除内部浮动，我们可以触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算。...因为BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。...同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

1.6K4 0

几种常见的CSS布局

常见的单列布局有两种： header,content和footer等宽的单列布局 header与footer等宽,content略窄的单列布局 1.如何实现对于第一种，先通过对header,content...overflow触发BFC,而BFC不会重叠浮动元素。...100%，此时，left和right部分会跳到下一行；通过设置margin-left为负值让left和right部分回到与center部分同一行； center部分增加一个内层div，并设margin...两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。...两种布局方式的不同之处在于如何处理中间主列的位置：圣杯布局是利用父容器的左、右内边距+两个从列相对定位；双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整四、等高布局等高布局是指子元素在父元素中高度相等的布局方式

8812 0

几种常见的 CSS 布局

常见的单列布局有两种： header,content 和 footer 等宽的单列布局 header 与 footer 等宽, content 略窄的单列布局 1.如何实现对于第一种，先通过对header...overflow触发BFC,而BFC不会重叠浮动元素。...100%，此时，left和right部分会跳到下一行；通过设置margin-left为负值让left和right部分回到与center部分同一行； center部分增加一个内层div，并设margin...两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。...两种布局方式的不同之处在于如何处理中间主列的位置：圣杯布局是利用父容器的左、右内边距+两个从列相对定位；双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整四、等高布局等高布局是指子元素在父元素中高度相等的布局方式

9052 0

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

找出问题是关键问自己三个问题：第一浮动会造成什么影响？第二，如何解决这些因为浮动而造成的影响？第三，bfc原理？...第二个影响：影响了父容器的高度，正常父元素的高度是自适应的，高度为其包含的内容总高度，而内部元素的浮动造成了父容器高度塌陷。第三个影响：父容器高度塌陷了，将会影响和父元素同级的文档布局。...通过图中的标注我们可以很清晰看到上面提到的三个影响，那么影响也清晰的看到了，下面该如何去解决这些影响呢？...俗话说的好，家丑不可外扬，那么来，现在就先解决外部矛盾，怎么解决呢，解决的思想，无非就是让父级元素的高度不再塌陷，把浮动元素的高度算进去。记住一个关键点，这时候，内部矛盾还是存在的。...我故意让content显示出来，会发现伪元素清除浮动的核心原理其实是在给父元素增加块级容器，同时对块级容器设置clear属性，使其能够清除自身的浮动，从而正常按照块级容器排列方式那样排列在浮动元素的下面

9822 0

css面试点二：BFC（块级格式化上下文）+常见布局方案

浮动 (float) 在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。...属于同一个BFC两个相邻Box的margin会发生重叠（正常的不设置浮动，两个块元素 margin重叠,仅仅是垂直方向，左右不是这个样子的），会发生外边距合并，指的是当两个垂直外边距相遇时，它们将形成一个外边距...合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 3.每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。...（不设置浮动，不设置左边距，块级子元素，一律靠左竖直向下排列，内联子元素一律从左向右排列，想想，正常写代码，都是这样，设置左浮动的靠近父元素的左边，设置右浮动，靠近父元素的右边。）...5.计算BFC的高度时，浮动元素也参与计算（就是子元素设置浮动，脱离文档流，父元素高度塌陷，给父元素设置BFC，那么父元素高度就不会忽略浮动的子元素，从而高度就不会塌陷，这样理解，好像是BFC又把脱离文档流的元素

4982 0

什么是BFC？看这一篇就够了

每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 BFC的区域不会与float box重叠。...BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。计算BFC的高度时，浮动元素也参与计算。如何创建BFC 1、float的值不是none。...3.清楚浮动。当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清楚浮动。比如这样： <!...因为BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。...同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

6272 0

小结BFC的基本知识与应用

(3)生成BFC元素的子元素中，每一个子元素的margin与包含块的左边界border相接触（对于从左到右的格式化，否则相反），即使存在浮动也是如此； (4)BFC的区域不会与float元素区域重叠可应用到两栏布局中...(6)计算BFC的高度时，浮动元素也参与计算可应用到解决浮动元素的父元素高度塌陷问题中：如果父元素的子元素都是浮动元素，那么父元素的高度会发生高度塌陷（height:0）。...可触发父元素生成BFC（overflow:hidden;）那么在“计算BFC的高度时，浮动元素也参与计算”，实现清除了内部浮动的效果。下面应用中会举例阐述。...overflow: hidden; } 效果： bfc解决两栏.png 不过我个人觉得这样做只是让BFC的区域不会与float元素区域重叠，实现了两栏布局效果，但并不是自适应的两栏布局，上述例子只是刚好父容器的宽度... 效果：浮动高度塌陷.png 如果父元素的子元素都是浮动元素，那么父元素的高度会发生高度塌陷。

3.1K65 1

剖析一些经典的CSS布局问题，为前端开发+面试保驾护航

另外当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block还是有一些区别的，第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的...); position: absolute; background: red; /* 下面两行让块垂直居中 */ top: 50%;...2.触发条件一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：下列方式会创建块格式化上下文：根元素() 浮动元素（元素的 float 不是 none）绝对定位元素（元素的 position...3.BFC渲染规则（1）BFC垂直方向边距重叠（2）BFC的区域不会与浮动元素的box重叠（3）BFC是一个独立的容器，外面的元素不会影响里面的元素（4）计算BFC高度的时候浮动元素也会参与计算...防止浮动导致父元素高度塌陷现有如下页面代码: <!

1.1K2 0

前端面试题归类-css

会合并盒子的左外边缘挨着容器(包含块)的左边块级格式化上下文(BFC) 的特性BFC 内的浮动不会影响到BFC外部的元素BFC 的高度会包含其内的浮动元素BFC 不会和浮动元素重叠BFC 可以通过 overflow...第二种全屏的品字布局:上面的div设置成100%，下面的div分别宽50%，然后使用float或者inline使其不换行。兼容常见的兼容性问题？...等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。...响应式设计的基本原理是什么？如何兼容低版本的IE？响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。...区域会自动分配水平空间有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度外层div使用position：relative；高度要求自适应的div使用position

1.6K4 0

深入理解和应用Float属性

一、Float的特性 1. 应用于文字围绕图片 2. 创建一个块级框 3. 多列浮动布局 4. 浮动元素的宽度、高度自适应，但可以设置其值。...三、非核心且主要应用领域分栏布局：让区块先水平排列，然后超出部分另起一行。...1.4 每个box的margin 左边，与包含border box的左边相接触（右边一样），浮动也是如此 2. IFC(行级格式化上下文）框从包含块的顶部开始，一个接一个水平放置。...规则如下： 2.1 不能指定宽高 2.2 Margin、Padding、border垂直方向的无效 2.3 行框的左边紧贴包含块的左边，而行框的右边紧贴其包含框的右边，而浮动块可以插入在包含块边缘与行框之间...主要原因为：position、fieldset都需要子元素来撑开父容器的高度，但子元素浮动后又不存在高度，所以失效。

1.1K10 0

CSS 基础系列：常见布局方式

，所以 dom 结构上先写 center 为了让三者共在一行，给它们设置浮动；为了让 center 自适应，给它设置宽度 100%。...此时布局是这样的： image.png 这里要注意的点：所有浮动元素可以看作位于同一个浮动流，利用负边距可以让某个元素在这个流中移动，并且会叠加到相应元素的上面。...，然后设置 center 的宽度为 100%，此时，left 和 right 部分会跳到下一行；通过设置负 margin 让 left 和 right 部分回到与 center 部分同一行；这里开始有所不同...树节点，增加渲染树生成的计算量。...两种布局的对比：优先加载主列。三列浮动，配合负外边距形成三列布局两种布局方式的主要区别在于如何处理主列，从而让其内容不被覆盖。

1.8K2 0

BFC（块级格式化上下文）与常见布局方案

可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。...属于同一个BFC的两个相邻Box的margin会发生重叠（正常的不设置浮动，两个块元素margin重叠,仅仅是垂直方向，左右不是这个样子的） 3.每个元素的margin box的左边，与包含块border...（不设置浮动，不设置左边距，块级子元素，一律靠左竖直向下排列，内联子元素一律从左向右排列，想想，正常写代码，都是这样，设置左浮动的靠近父元素的左边，设置右浮动，靠近父元素的右边。）...5.计算BFC的高度时，浮动元素也参与计算（就是子元素设置浮动，脱离文档流，父元素高度塌陷，给父元素设置BFC，那么父元素高度就不会忽略浮动的子元素，从而高度就不会塌陷，这样理解，好像是BFC又把脱离文档流的元素...BFC清除浮动浮动元素是会脱离文档流的(绝对定位元素会脱离文档流)。如果一个没有高度或者height是auto的容器的子元素是浮动元素，则该容器的高度是不会被撑开的。

5463 0

CSS进阶04-块格式化上下文BFC

在一个块格式化上下文中，每个盒的左外边缘紧贴包含块的左边缘（从右到左的格式里，则为盒右外边缘紧贴包含块右边缘），即使有浮动参与也是如此（尽管盒里的行盒可能由于浮动而收缩），除非盒创建了一个新的块格式化上下文...3.2在一个块格式化上下文中，每个盒的左外边缘紧贴包含块的左边缘（从右到左的格式里，则为盒右外边缘紧贴包含块右边缘），即使有浮动参与也是如此（尽管盒里的行盒可能由于浮动而收缩），除非盒创建了一个新的块格式化上下文...内容为float-left的div虽然把div3内容向右挤开了一段距离（原因是浮动导致id为div3的盒内的行盒收缩），但是id为div3的盒的左外边缘仍然紧贴其包含块的左边缘。...3.2-2 可以看到div3由于浮动生成了新的BFC，会导致盒的左外边缘不再紧贴其包含块的左边缘，并且由于浮动，其本身宽度变窄了。 4....那么，BFC如何清除浮动呢？看下面这个例子： <!

5903 0

2018年9月9日用HTML开发网页的总结

mragin-top只会改变盒子的位置，让盒子的位置向下移动一定的距离，不会改变盒子的大小(margin的所有属性都一样) 而pading-top会改变盒子的大小，pading-top...##### #号中的言论待考证如果第一个div1里面的内容高度小于或者等于本身定义的div0的高度的话，下一个div2就会自动靠下边最左边浮动如果div1里面的内容的高度大于div1设置的高度的话...，div2的位置不会靠最左边，而是在多出内容的右下角为开头浮动，如果div设了float:left; 则在div的右边浮动。 ...#### 两个div,分别为div1和div2,如果div1的float调为left,div2不调，那个div2就会从div1开始的地方，开始浮动，也就是覆盖在div1的下面，哪个定义浮动，哪个就优先显示...要想让每一个div规规矩矩的从上往下排列就需要给想要浮动的那个个div设置宽度和高度，并给指定的div设置float为left.

1.1K6 0

浅谈 CSS 的用法

1.1 CSS 简介 1.1.1 概述为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS 由此诞生，CSS 是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表...1.4.1 盒子设置设置宽高 width:200px; /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度 */ height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度...，不是盒子整体高度 */ 设置边框 border-top:10px solid red; /* 设置顶部边 */ border-bottom:10px solid red; /* 设置低部边 */...左右 + border 左右 ♞ 盒子高度 = height + padding 上下 + border 上下 1.4.3 浮动浮动的特性 ① 浮动元素有左浮动(float:left)...(一般是高度不设置)，父元素内整体浮动的子元素无法撑开父元素，父元素需要清除浮动

1.5K4 0

css多浏览常见问题

这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。..."; display: block; height: 0; clear: both; visibility: hidden;} 8 DIV浮动IE文本产生3象素的bug 左边对象浮动，右边采用外补丁的左边距来定位...这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。...如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。 CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。...当然，有时候定位的方法而不是边距的方法更好些。 10、直通到屏幕底部的背景色在垂直方向是进行控制是CSS所不能的。

1.1K3 0

元素的浮动

一、浮动 HTML元素的浮动是通过css来设定的，css中的float属性可以让元素左浮动或者右浮动，具体设置参数如下 float: left; /*左浮动*/ float: right; /*右浮动*... 通过浏览器打开查看下效果可以发现文字不是在新的一行，而是紧跟着html元素，这就导致布局无法按照我们预期的方式展现，这就是接下来我们要说的高度塌陷问题，那这个问题该如何解决呢...，其实上图就是因为没有给ul指定高度，而ul的子元素li全部浮动后导致的ul高度塌陷。...3.2 给父级元素设置overflow 可通过css的属性overflow来出发元素的bfc，从而让元素来清除浮动，比如我们在父元素ul上增加overflow属性 ul{ overflow: hidden...; } 页面显示效果如下可以看到这种效果比第一种的好，而且比第一种简单，但是overflow的本义并不是为了解决高度塌陷的，所以用在这里也是有点奇怪 3.3 给父级元素也设置浮动给父元素ul

1901 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭