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

为什么我的浮动容器在我的div下面而不是从新的一行开始

浮动容器在div下面而不是从新的一行开始的原因是因为浮动元素会脱离正常的文档流,不再占据原有位置,而是尽可能地靠近其容器的左侧或右侧。当一个元素浮动时,其后面的元素会紧跟在其后,而不会另起一行。

要解决这个问题,可以使用清除浮动的方法。常见的清除浮动的方法有以下几种:

  1. 使用clear属性:在浮动元素的下方添加一个空的div,并设置其clear属性为both。例如:
代码语言:txt
复制
<div style="clear:both;"></div>
  1. 使用clearfix类:在浮动元素的父容器上添加clearfix类,该类定义如下:
代码语言:txt
复制
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

然后在父容器的class属性中添加clearfix类。例如:

代码语言:txt
复制
<div class="clearfix">
  <!-- 浮动元素 -->
</div>
  1. 使用overflow属性:在浮动元素的父容器上设置overflow属性为auto或hidden。例如:
代码语言:txt
复制
<div style="overflow:auto;">
  <!-- 浮动元素 -->
</div>

以上方法可以解决浮动容器在div下面而不是从新的一行开始的问题。在实际开发中,可以根据具体情况选择适合的方法来清除浮动。

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

相关·内容

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

复制代码 其实个人理解,浮动造成最核心问题就是破坏了文档流,那么问题来了,float破坏了文档流,为什么还要设计这个api,查了一些资料最后才知道,这是因为当初设计float目的是为了能实现文字能够环绕图片排版功能...这只是开始,大家眼睛盯好,继续看下面截图: ---- ? 从图中标注可以看出,为什么伪元素要设置display:block,继续看下一个截图。 ---- ?...从上图中可以知道,为什么height要设置成 0 了。如果content不是空字符串,那么就会在页面中显示内容。...故意让content显示出来,会发现伪元素清除浮动核心原理其实是在给父元素增加块级容器,同时对块级容器设置clear属性,使其能够清除自身浮动,从而正常按照块级容器排列方式那样排列浮动元素下面...同时,父元素同级元素也会正常排列伪元素形成块级元素后面,不受浮动影响。 ---- 下面是干掉clear属性后截图: ?

98820
  • CSS魔法堂:说说Float那个被埋没志向

    (float:right同理,只是方向不同而已) 注意:仅考虑浮动元素本身前提下,float:left效果与display:inline-block容器direction:ltr效果是一样...头痛开始——基于Normal flow看Float  用割裂方式理解float并不难,难就难结合Normal flow看Float。下面我们一起来探讨吧!警告,前方高能,前方高能!!...:#06f;width:200px;height:100px;"> 通过创建BFC翻身做主人  同样是盒子,为啥你就可以上面呢?...是"浮动闭合"还是"清除浮动"?  想各位都看过各种版本clearfix实现,最简单粗暴方式就是添加一个来清除浮动。...还听过另一个名称——"浮动闭合",那到底两者有什么区别呢?作区分之前我们先要明确问题本身。

    78080

    理解 CSS 布局和 BFC

    BFC是一个独立布局环境,其中元素布局是不受外界影响,并且一个 BFC 中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直沿着其父元素边框排列。...块格式化上下文(BFC)行为通过一个简单float示例很容易理解。在下面的示例中,有一个框,其中包含向左浮动图像和一些文本。...这是因为当我们浮动一个元素时,文本所在宽度保持不变,为给浮动元素腾出空间缩短是文本行框。这就是为什么背景和边框会出现在浮动后面的原因。 我们通常有两种方法来解决这个布局问题。...一种方法是使用 clearfix hack,它作用是文本和图像下面插入一个元素,并将其设置为 clear:both。另一种方法是使用 overflow 属性,其值不是缺省值 visible。...查看演示 多列布局中使用 BFC 如果我们创建一个占满整个容器宽度多列布局,某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列总宽度会超出容器

    1.2K00

    CSS布局基础(待补充完整)

    1 文档流 要了解css布局,就要先了解什么是文档流。文档流就是HTML元素一种排列规则。 正常文档流就是不用样式控制之下,html元素默认排版方式。...它规则如下: 自上而下排列,每个块元素独占一行,行内元素自左向右排列,不会独占一行 独占一行 从左向右 这是不使用 样式请况之下正常排列方式...一旦使用了浮动元素。...,并且自带内边距 这一类标签在页面中会紧贴在浮动元素下面 ( 这个紧贴不是边框紧贴!...能不能让它不要忽视浮动元素,而是排在浮动元素之后呢?能不能让段落标签不这么紧贴着,而是以边框为基准排在浮动元素后面呢?答案是肯定

    37810

    理解 Css 布局和 BFC

    BFC是一个独立布局环境,其中元素布局是不受外界影响,并且一个 BFC 中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直沿着其父元素边框排列。...块格式化上下文(BFC)行为通过一个简单float示例很容易理解。在下面的示例中,有一个框,其中包含向左浮动图像和一些文本。...删除一些文本 这是因为当我们浮动一个元素时,文本所在宽度保持不变,为给浮动元素腾出空间缩短是文本行框。这就是为什么背景和边框会出现在浮动后面的原因。 我们通常有两种方法来解决这个布局问题。...一种方法是使用 clearfix hack,它作用是文本和图像下面插入一个元素,并将其设置为 clear:both。另一种方法是使用 overflow 属性,其值不是缺省值 visible。...多列布局中使用 BFC 如果我们创建一个占满整个容器宽度多列布局,某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列总宽度会超出容器

    1.4K00

    CSS基础知识

    下面代码是错误: 三年级时,还是一个胆小如鼠小女孩,上课从来不敢回答老师提出问题,生怕回答错了老师会批评。...a{display:block;} 块级元素特点: 1、每个块级元素都从新一行开始,并且其后元素也另起一行。...(真霸道,一个块级元素独占一行) 2、元素高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度不设置情况下,是它本身父容器100%(和父元素宽度一致),除非设定一个宽度。...要变成内联元素 内联元素特点: 1、和其他元素都在一行上; 2、元素高度、宽度及顶部和底部边距不可设置; 3、元素宽度就是它包含文字或图片宽度,不可改变。...任何元素默认情况下是不能浮动,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。 什么是层模型?

    1.3K20

    由position属性引申关于css进阶讨论(包含块、BFC、margin collapse)

    写这篇文章起因是源于这篇文章:谈谈面试与面试题 中关于position讨论,文中一开始就说这句话: 面试时候问个cssposition属性能刷掉一半的人这是啥情况…… 其实这问题本来打算是可以顺着一路扯到...也就是说,上下两个块级盒之间边距由它们之中边距较大元素决定,不是他们和!...div1和div2垂直距离由大margin决定,也就是div240px不是二者之和60px。 其次,行内元素是会被折断,当宽度受到限制时候,它会自动移动到下一行。...BFC中,每一个盒子左外边缘(margin-left)会触碰到容器左边缘(border-left)(对于从右到左格式来说,则触碰到右边缘), 即使存在浮动也是如此(尽管一个子元素内容区域会由于浮动压缩...总之,对于 "display:table" 元素,产生块格式化上下文是匿名框不是 "display:table"。 最后,是这些元素创建了块格式化上下文,它们本身不是块格式化上下文。

    1.1K50

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

    普通流 (normal flow) 普通流中,元素按照其 HTML 中先后位置至上下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整一个新行,除非另外指定...绝对定位 (absolute positioning) 绝对定位布局中,元素会整体脱离普通流,因此绝对定位元素不会对其兄弟元素造成影响,元素具体位置由绝对定位坐标决定。...BFC是一个独立布局环境,其中元素布局是不受外界影响,并且一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直沿着其父元素边框排列。...(不设置浮动,设置浮动那肯定是 左右一行排列了)。...BFC清除浮动 浮动元素是会脱离文档流(绝对定位元素会脱离文档流)。如果一个没有高度或者height是auto容器子元素是浮动元素,则该容器高度是不会被撑开

    55730

    清除浮动几种方法

    利用 overflow 清除浮动 其实第一次看到可以用 overflow 清除浮动(其实是拒绝),有一种很神奇感觉,为什么这样可以清除浮动?!而这样问题,也作为面试题被问过。...属性均可以清除浮动 overflow 被广泛使用原因,想应该在于,触发 BFC 或者 hasLayout 同时,对元素自身定位或者表现影响有限。...下面是对使用 overflow 几个属性值来清除浮动时,它们之间差异性。...使用 auto 或者 hidden 时,需要保证容器高度为自适应(即不显式定义height);此外浮动元素总宽度应该始终小于容器宽度。...否则,清除了浮动同时会带来另外问题:超出容器部分内容会被“切”掉,或者出现滚动条。 3. Explorer Mac中,设置 auto 会始终显示滚动条。(不懂mac 没测过) 4.

    75120

    css笔记

    块级元素特点: (1)总是从新开始 (2)高度,行高、外边距以及内边距都可以控制。 (3)宽度默认是容器100% (4)可以容纳内联元素和其他块元素。...(3)宽度默认是容器100% (4)可以容纳内联元素和其他块元素。 行内元素特点: (1)和相邻行内元素一行上。...好比我们浮动,有浮动开始,则就应该有浮动结束。 为什么要清除浮动 我们前面说过,浮动本质是用来做一些文字混排效果,但是被我们拿来做布局用,则会有很多问题出现, 但是,你不能说浮动不好 。...准确地说,并不是清除浮动,而是清除浮动后造成影响 如果浮动开始就是一个美丽错误,那么请用正确方法挽救它。 清除浮动本质 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 问题。...项目位于容器开头。 让子元素从父容器开头开始排序但是盒子顺序不变 flex-end 项目位于容器结尾。 让子元素从父容器后面开始排序但是盒子顺序不变 center 项目位于容器中心。

    7.7K50

    Imooc之Html与CSS

    a{display:block;} 块级元素特点: 每个块级元素都从新一行开始,并且其后元素也另起一行。(真霸道,一个块级元素独占一行) 元素高度、宽度、行高以及顶和底边距都可设置。...要变成内联元素 内联元素特点: 和其他元素都在一行上; 元素高度、宽度及顶部和底部边距不可设置; 元素宽度就是它包含文字或图片宽度,不可改变。...任何元素默认情况下是不能浮动,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。...>、、、、、 常用内联块状元素有: 、 块级元素 块级元素特点: 1、每个块级元素都从新一行开始,并且其后元素也另起一行...(真霸道,一个块级元素独占一行) 2、元素高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度不设置情况下,是它本身父容器100%(和父元素宽度一致),除非设定一个宽度。

    6.8K20

    第五节 关于浮动和清除浮动解说,以及两个大坑不要踩

    开始今天课程之前,有一个东西需要先讲一下,学网页,认为最最重要就是学布局,如果一个网页,你不去布局,学再多div加css也无济于事,你就算学了再多特效,又能怎么样?那么,何为布局呢?...接下来,我们来说一个非常非常重要知识点,那就是浮动布局。那么,到底什么是浮动呢,还是以案例为主吧。B区域画三个div盒子,给他们都绑定同一个class,叫做box。 ?...1489391487793013193.png 可以看到,div元素是块级元素,再复习一下啊,块级元素有什么特点啊,是不是会独自占满一行呀?所以,这三个div元素就没法一行显示了。...1489391754949081918.png 哇,是不是飘起来了。没错,这个就叫做浮动布局。现在问一下大家,你觉得,浮动布局目的是什么?没错,就是为了让块级元素一行上显示,仅此而已。...没有其他更玄妙说法了,不论多么复杂网页,如果用到了浮动布局,肯定就是这么回事,肯定是为了让某些div元素一行上面显示。在这个例子中,我们如果让第三个盒子往右浮动,就给它单独加一个行内样式: ?

    1.1K70

    前端入门4-CSS属性样式表声明正文-CSS属性样式表

    float 浏览器绘制这个网页时,按照文档流顺序,先在网页第一行左边开始处理 div1 元素,发现它一个浮动元素,则将其抽离到另一个层面,浮动文档流上面。...然后它继续处理 div2 元素,因为之前处理 div1 元素是浮动元素,不占用文档流,所以此时仍旧是一行左边绘制 div2 元素,发现它是一个块级元素,所以让其霸占一整行。...紧接着,继续处理 div3 元素,因此之前 div2 块级元素已经霸占了第一行了,所以此时是第二行处理 div3 元素,发现它也是一个浮动元素,便以当前位置将其抽离到另一层面绘制。...如果接下去处理元素是块级元素,那么此时效果会是怎样呢? 如果接下去是块级元素,那么它就会是绘制浮动元素 div3 和 dive4 下面,呈现出重叠效果。...如果我们想让浮动元素之后元素另起一行从新位置开始布局,那么就要进行浮动清除。

    1.6K30

    【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度外边距其他元素所占空间影响

    (一般情况下参考元素 == 父级元素,这里写成参考元素不是父级元素,在下面我会再细说) 2.width:auto也是以“占满参考元素宽度”为目标。...没错,在一般情况下(没有浮动不是行内框),并排div margin可以彼此重叠,而且重叠后值为两者中较大那个 ?..."div4"这个文本不是被包裹在div4这个元素里面吗,为什么浮动元素div2“怼”下来了?刚刚不是还说好浮动 ==脱离文档流 == 不占其他元素物理空间吗?对啊,这里说是元素,并不是文本。...浮动元素会影响文本位置! 我们甚至可以无脑地推测,float开始设计作用就是为了解决以下这个问题—— 让文本环绕一个图片,就像下面这个W3C案例一样: ?...【实现思路】:正如上面所说,浮动会脱离文档流从而不占据其他元素物理位置,而我们让div1向左浮动了,这表示我们考虑div2布局时候完全可以把div1当作不存在。

    2.1K110

    CSS再学

    green是正确颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式,权值高就使用哪种css样式。...每个块级元素都从新一行开始,并且其后元素也另起一行。 2.  元素高度、宽度、行高以及顶和底边距离都可设置。 3.  元素宽度不设置情况下,是它本身父容器100%,除非设置一个宽度。...浮动模型(float): 任何元素默认情况下是不能浮动,但可以使用CSS定义浮动,如div、p、table、img等元素都可以被定义为浮动。 层模型: 层模型有三种形式: 1. ...十六进制颜色 p{color:#00ffff;} 长度值(px) css样式设置小技巧 水平居中 html代码:    想要在父容器中水平居中显示...html代码:                     是第一行文本         是第二行文本</

    2K70

    css面试点二:BFC(块级格式化上下文)+常见布局方案

    三种常见布局方案方案: 普通流 (normal flow) 普通流中,元素按照其 HTML 中先后位置至上下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整一个新行...绝对定位 (absolute positioning) 绝对定位布局中,元素会整体脱离普通流,因此绝对定位元素不会对其兄弟元素造成影响,元素具体位置由绝对定位坐标决定。...BFC是一个独立布局环境,其中元素布局是不受外界影响,并且一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直沿着其父元素边框排列。...或fixe BFC布局规则: 1.内部Box会在垂直方向,一个接一个地放置(不设置浮动,设置浮动那肯定是左右一行排列了)。...BFC清除浮动 浮动元素是会脱离文档流(绝对定位元素会脱离文档流)。 如果一个没有高度或者height是auto容器子元素是浮动元素,则该容器高度是不会被撑开

    50320

    讲一下怎么区分伪类、伪元素,同时优雅处理页面浮动问题

    原因很简单,因为发现这几个概念不仅仅是编码的人搞不明白,很多前端,就是靠这个技术吃饭的人都很多搞不明白怎么回事为什么浮动一起说呢,其实这篇文章真正要说浮动给我们布局带来问题,我们应该怎么合理处理...伪类介绍 首先介绍一下什么是伪类:伪类其实我们经常用到,只是我们自己不会刻意说这个是伪类这样一个东西,下面简单举个例子就明白了怎么回事 <!...以往这个属性总应用于图像,使文本围绕在图像周围,不过 CSS 中,任何元素都可以浮动浮动元素会生成一个块级框,不论它本身是何种元素。...也就是说,被浮动元素是不可以撑起来这个外层div 浮动元素父级元素不够包它时候,他会自动填充到下一行 写个例子 <!...,我们最外层伪元素结尾部分加上清除浮动就可以了。

    50710

    css-浮动

    然而,接着浮动盒 创建的当前及后续行盒会进行必要缩短,为了给浮动(盒)margin box让出空间。 二,浮动例子 浮动定义很枯燥,下面我们通过几个例子,来理解浮动概念。...行盒就是 line-box,也就是一个块级元素展示出一行就是一个行盒。块级元素内展示一行所有元素共同构成了一个行盒。...所有元素从上到下依次排列,普通元素可以把父元素内容撑开。 但浮动元素脱离了普通流,元素不是一个个从上到下排列浮动元素也不能把父元素撑开,因为父元素压根就看不见浮动元素。 demo链接描述 ?...(2)父容器高度计算出现问题 父元素看不到浮动元素,如果父元素没有设置高度,浮动元素是无法撑开父容器。...demo链接描述 /li里面的元素全部浮动情况下,.navbar高度为0,所以设置背景色无效 ? 四:清除浮动 (1)clear属性 clear可以用于任何元素,无论是不是浮动元素都可以加。

    1.3K30
    领券