如何阻止文本环绕一些浮动的div？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

理解 Css 布局和 BFC

如果我们有足够多的文本，它会环绕浮动的图像和边框，然后环绕整个区域。 div class="outer"> div class="float">I am a floated element....删除一些文本这是因为当我们浮动一个元素时，文本所在的框的宽度保持不变，为给浮动元素腾出空间而缩短的是文本的行框。这就是为什么背景和边框会出现在浮动后面的原因。我们通常有两种方法来解决这个布局问题。...div> div class="text">I am textdiv> div> 带有 float 类的项被向左浮动，因此 div 中的文本在它环绕 float 之后。 ?...将包裹文本的div设置为BFC 这实际上是我们创建具有多个列的浮动布局的方法。浮动项还为该项创建了一个 BFC，因此，如果右边的列比左边的列高，那么我们的列就不会相互环绕。...不过无论如何，你现在应该已经理解了什么是 BFC，以及如何使用 overflow 或其他方法来包裹浮动，以及知道了 BFC 可以阻止元素去环绕浮动元素，如果你想使用弹性或网格布局可以在一些不支持他们的浏览器中使用

2K0 0

理解 CSS 布局和 BFC

块格式化上下文(BFC)的行为通过一个简单的float示例很容易理解。在下面的示例中，我有一个框，其中包含向左浮动的图像和一些文本。...如果我们有足够多的文本，它会环绕浮动的图像和边框，然后环绕整个区域。...如果我删除了一些文本，那么就没有足够的内容来包围图像，而且由于浮动被从文档流中脱离，所以边框会上升，并在图像下方，直到文本的高度。 ?...div> div class="text">I am textdiv> div> 带有 float 类的项被向左浮动，因此 div 中的文本在它环绕 float 之后。 ?...不过无论如何，你现在应该已经理解了什么是 BFC，以及如何使用 overflow 或其他方法来包裹浮动，以及知道了 BFC 可以阻止元素去环绕浮动元素，如果你想使用弹性或网格布局可以在一些不支持他们的浏览器中使用

1.6K0 0

您找到你想要的搜索结果了吗？

是的

没有找到

理解CSS布局和块格式化上下文

常见应用场景使父元素包含浮动元素下面例子解释如何让浮动内容和父元素等高，清楚浮动负面影响 html div class="outer"> div class="float">I am a floated...background-color: #ccc; margin: 0 0 40px 0; overflow: auto; } [enter image description here] BFC防止文本环绕...div> div> css .float{ float: left; } [enter image description here] 这时候如果不想要右侧文字环绕浮动文字盒子，在左侧div...设置浮动的情况下，我可以通过使右边div成为BFC，使两个兄弟div互相隔离、互不影响，从而达到去除文字环绕的效果。...flow-root浏览器兼容情况： [enter image description here] 浏览器对此值的支持是有限的，如果要在不支持flex或网格布局浏览器创建回退，了解BFC阻止浮动元素的负面影响十分必要

2.5K3 0

关于BFC理解

，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果和印刷排版中的文本环绕相似。...它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。...简单来说，可以把BFC理解成一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部的元素。...形成了BFC的区域不会与float box重叠（可阻止因浮动元素引发的文字环绕现象）计算BFC高度时，浮动元素也参与计算（BFC会确切包含浮动的子元素，即闭合浮动）注意⚠️，对于第五点，原本浮动元素是应该脱离文档流的...BFC的一些应用实现自适应的两栏布局应用了第四点BFC的区域不会与float box重叠的特性。一边浮动，另一边自适应的部分形成BFC，那么两者就不会重叠，避免了文字环绕及类似情形。

1.3K3 0

快速理解BFC原理

浮动 (float) 在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。...具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。...通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。...BFC 可以阻止元素被浮动元素覆盖先来看一个文字环绕效果： div style="height: 100px;width: 100px;float: left;background: lightblue..., width: 200px; height:200px; background: #eee;div> 这时候其实第二个元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖

9802 0

BFC用途总结

前次写了一些关于BFC的基本概念，这次接上次的写一些BFC的应用。 BFC引起margin塌陷在常规流中，盒子在垂直方向上从上到下排列。...使用BFC阻止margin塌陷这看上去与第一个作用有点矛盾，但是请大家记住，造成margin塌陷的原因是相邻的盒子属于同一个BFC。...使用BFC来包含浮动块在日常工作中经常会遇到一个容器包含浮动的子元素，此时子元素脱离常规文档流，父容器没有高度。一般的解决方法是使用“clearfix”，但是同样可以使用BFC来解决。 ?...: green; } .container div { float: left; background-color: lightgreen; margin: 10px; } 使用BFC阻止文本环绕...Figure1的文本环绕图片，但正常情况下，我们需要实现Figure2中排版。

1.3K7 0

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

、流布局已足够强大，但整理来说比较规规矩矩，有时我们需要一些特殊的布局（文字环绕、元素固定在某个位置），从而诞生了一些破坏流的属性，与此同时也产生了一些保护流的属性。..."高度塌陷"可以让跟随的内容和浮动元素在一个水平线上；行框盒子如果和浮动元素的垂直高度有重叠，则行框盒子在正常定位下只会跟随浮动元素，而不会产生重叠。这是实现文字环绕的重要两点！...即，设置了clear属性的元素自身如何如何，而不是让float元素如何如何。...作用：该部分参考自（可通过链接查看示例）：CSS中重要的BFC 阻止元素被浮动元素覆盖：设置一个元素的float、display、position等值触发BFC，以阻止被浮动盒子覆盖；可以包含浮动元素...：改变包含浮动子元素的父盒子的属性值，触发BFC，以此来包含子元素的浮动盒子；（注意：对于子元素为absolute、fixed等其他脱离文档流的元素不生效）阻止浏览器因为四舍五入造成多列布局换行情况；

5.7K1 1

什么是BFC

float浮动布局在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。...具有BFC特性的元素可以理解为一个完整的盒子，这个盒子不会产生塌陷，无论内部元素如何变化，其外部元素不受影响如何触发BFC 只要元素满足下面任一条件即可触发 BFC 特性： body 根元素浮动元素...2.BFC 可以阻止元素被浮动元素覆盖我们来看下面一个例子 div style="height: 100px;width: 100px;float: left;background: lightblue...">我是一个左浮动的元素div> div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动, 也没有触发 BFC 元素...左浮动的元素会盖住未浮动元素一部分区域，但是文字不会被覆盖，形成了文字环绕的效果，如果不想这样，我们可以采用BFC的方式，和上面的例子相同，添加一个overflow:hidden来触发BFC即可 div

1.1K2 0

小结CSS的float属性

除此之外，浮动还可以用于创建网页布局 1.1文本环绕图片通过给图片设置float属性，形成文字环绕图片的效果，是float属性的常见应用场景之一：效果：文字环绕图片.png 附上实现代码：浮动，并会显示在其在文本中出现的位置。 inherit：规定应该从父元素继承 float 属性的值。...、IE7有一些浮动相关 bug，由于越来越多的设计师不再支持 IE6 了，你也可以不关注它。...4.如何清除浮动 4.1clear属性规定元素的哪一侧不允许有其他浮动元素 clear: none | left | right | both left：不允许左侧有浮动对象； right：不允许右侧有浮动对象...> div> 5.小结本文主要结合了具体事例，分别介绍了什么是浮动、设置浮动会有什么影响，以及如何消除浮动。

5.6K140 3

小结CSS的float属性

前端林子本文将从以下三个方面介绍CSS的float属性：什么是float 浮动引发的问题几种清除浮动的方法 1.什么是float 应用了float属性的元素，就像在印刷布局中，形成文字环绕图片的效果...除此之外，浮动还可以用于创建网页布局 1.1文本环绕图片通过给图片设置float属性，形成文字环绕图片的效果，是float属性的常见应用场景之一：效果： ? 附上实现代码：浮动，并会显示在其在文本中出现的位置。 inherit：规定应该从父元素继承 float 属性的值。...3.4 老IE中的问题 IE6、IE7有一些浮动相关 bug，由于越来越多的设计师不再支持 IE6 了，你也可以不关注它。..."> //中间栏 div> div> 5.小结本文主要结合了具体事例，分别介绍了什么是浮动、设置浮动会有什么影响，以及如何消除浮动。

1.5K5 0

04_BFC

BFC是一个独立的布局环境，BFC 内部的元素布局与外部互不影响可以通过一些条件触发 BFC，从而实现布局上的需求或解决一些问题可以将 BFC 想象成一个工具，无需探究其定义，只要着重理解其功能（特性...那么如何让垂直外边距不折叠呢？特性中提到：BFC就是页面上的一个独立容器，容器里面的子元素不会影响外面元素，同样外面的元素不会影响到BFC内的元素。...1.3.3 阻止元素被浮动元素覆盖两栏布局 .left { float: left; width: 100px; height:...">div> div> 1.3.5 防止字体环绕浮动的盒子会遮盖下⾯的盒子，但是下⾯盒子⾥的文字是不会被遮盖的，文字反⽽还会环绕浮动的盒子。... 1.4 练习作业 1、实现两栏布局，三栏布局 2、实现文字环绕效果

2481 0

【CSS】410- 关于CSS盒子模型、BFC及其应用

Padding(内边距) - 清除内容周围的区域, 内边距是透明的. Content(内容) - 盒子的内容, 显示文本和图像等....具有 BFC 特性的元素, 可以看作是隔离了的独立容器, 容器里面的元素不会在布局上影响到外面的元素, 并且 BFC 具有普通容器所没有的一些特性。...可以这样来理解, 将 BFC 理解为一个完全封闭的盒子, 盒子内部的元素无论如何摆放, 也不会影响到盒子外面....触发盒子的 BFC 特性后: ? 3. 阻止元素被浮动元素覆盖下图是一个文字环绕效果. ? 蓝色 div 是一个浮动元素, 灰色 div 是一个块级元素....会造成上图的原因是因为灰色 div 被蓝色 div 所覆盖, 但文本不会被覆盖, 所以被强行压缩换行. 如果想要避免这种情况, 可以触发灰色 div 的 BFC 特性. ?

8752 0

前端工程师之BFC机制

BFC是一个独立的布局环境，BFC 内部的元素布局与外部互不影响可以通过一些条件触发 BFC，从而实现布局上的需求或解决一些问题可以将 BFC 想象成一个工具，无需探究其定义，只要着重理解其功能（特性...那么如何让垂直外边距不折叠呢？特性中提到：BFC就是页面上的一个独立容器，容器里面的子元素不会影响外面元素，同样外面的元素不会影响到BFC内的元素。...1.3.3 阻止元素被浮动元素覆盖两栏布局 .left { float: left; width: 100px; height:...">div> div> 1.3.5 防止字体环绕浮动的盒子会遮盖下⾯的盒子，但是下⾯盒子⾥的文字是不会被遮盖的，文字反⽽还会环绕浮动的盒子。... 1.4 练习作业 1、实现两栏布局，三栏布局 2、实现文字环绕效果

5971 1

Float浮动

浮动元素会脱离文档流但不会脱离文本流，当浮动时其不会影响周围的盒子模型，但是文字会环绕在浮动元素周围，可以认为文档流与文字流是分层结构而浮动元素盒子与文字元素处于同一层。...文档流，指的是盒子元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。文本流，指的是文字元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。...可以认为文档流与文字流是分层结构而浮动元素盒子与文字元素处于同一层，当元素浮动时，其脱离文档流不脱离文本流，所以浮动元素的渲染与文字的渲染是一并渲染的，浮动元素会将文字元素挤开，呈现文字环绕浮动元素的效果...div> 虽然float最初的设计就是用来实现文字环绕效果的，在某些使用float的布局下若是不想触发文字环绕效果，可以通过触发BFC来避免文字环绕。...> 清除浮动使用浮动可能会导致一些负面影响，由于脱离文档流，无法撑起父元素导致背景以及边框无法正常显示、与其他元素重叠、下层浮动依旧会在上层浮动元素的基础上进行浮动等问题，此时就需要清除浮动。

1.5K3 0

浮动布局的深入理解与应用

浮动布局是CSS中一种非常强大的布局方式，最初设计用来实现文字环绕图片的效果，但随着网页设计的发展，浮动布局逐渐演变成一种重要的页面布局手段。...以下是对浮动布局的详细介绍和一些相关的CSS代码示例。浮动的简介浮动（float）是一种CSS属性，用于控制元素在页面上的显示位置。...最初，浮动主要用于实现文字环绕图片的效果，但随着时间的推移，浮动被广泛应用于各种网页布局中。... div> 在这个示例中，img元素被设置为浮动到右侧，文章的正文内容会环绕在图片的左侧。示例2：多列布局在一些新闻网站或博客中，你可能需要将文章分成多列显示。...通过合理地使用浮动属性和相关的CSS技巧，你可以创建出既美观又实用的网页设计。然而，浮动布局也有一些局限性，例如对父元素高度的影响和对布局的控制不如现代的Flexbox和Grid布局。

6421 0

前端系列第4集-解释下浮动和它的工作原理，清除浮动的方法

浮动是CSS布局中的一个重要概念，它可以让元素脱离标准文档流，并且可以让其他元素环绕在其周围。通常情况下，浮动用于创建多列布局或者图像与文字混排的效果。...document.querySelector('.clear-float'); clearFloat.style.height = container.offsetHeight + 'px'; 这种方法的好处是能够解决一些兼容性问题...通过 float 属性，可以使一个元素脱离正常的文档流，沿其容器的左侧或右侧边缘排列。浮动通常用于实现文本环绕图片、创建多列布局等效果。...工作原理当一个元素应用 float 属性后，它会沿其父容器的左侧或右侧边缘浮动。其他非浮动元素将不会覆盖浮动元素，而是环绕它。同时，浮动元素里面的文本和内联元素也会环绕浮动元素。...需要注意的是，浮动元素只会影响其后的同级元素。举个例子，你可以为一个图片元素设置 float: left，这会使图片沿父容器左侧浮动，同时后面的文本会环绕这个图片。

9512 0

CSS 面试要点：BFC(块级格式化上下文)

HTML 文档中的位置决定浮动元素先按照普通流的位置出现，再根据浮动的方向尽可能向左或向右偏移，效果与印刷排版中的文本环绕相似绝对定位元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响...元素的具体位置由绝对定位的坐标决定 # BFC 格式化上下文（Formatting Context）指页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用...块级格式化上下文（Block Formatting Context）属于普通流，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响外面的元素，并且 BFC 具有普通容器所没有的一些特性...https://codepen.io/cellinlab/pen/qBxJoNw # 阻止元素被浮动元素覆盖文字环绕 https://codepen.io/cellinlab/pen/oNEaqBK...上面的灰色元素被浮动元素所覆盖（注意文本不会被覆盖），如果要避免元素被覆盖，看以触发第二个元素的 BFC 特性 https://codepen.io/cellinlab/pen/JjpmLZg

5202 0

【Web前端】万物皆可“浮动”（补充）

float 属性最初的设计目的是在文本块内使图像浮动，从而让文字环绕在图像的左右两侧，这种效果在报纸版面中很常见。随着时间的推移，这一属性已成为网页设计中实现多列布局的常用工具。...一、浮动的背景知识浮动是 CSS 中的一个布局属性，用于将元素从正常文档流中移出，并将其放置在容器的左侧或右侧。浮动的最初目的是为了实现文本环绕效果，即使图像或其他元素环绕在文本周围。...inherit：继承父元素的浮动属性。 1.2 浮动的影响当一个元素被设置为浮动时，它会脱离文档流，其他的块级元素会环绕在它周围。浮动二、简单的例子 div> div> 示例中我们创建了一个容器 container，其中包含一个浮动的图像和一段文本。...三、让浮动效果可视化浮动效果在布局中非常重要，为了更好地理解它，我们可以通过一些额外的样式来可视化浮动元素的影响。 <!

4961 0

【CSS】309- 复习 CSS盒模型

主要看怎么父元素的盒模型如何设置。...文字环绕效果，设置 float；（5）BFC 的区域不会与 float Box 重叠（清浮动）; （6）计算 BFC 的高度时，浮动元素也参与计算。...3、可以让父元素的高度包含子浮动元素，清除内部浮动（原理：触发父 div 的 BFC 属性，使下面的子 div 都处在父 div的同一个 BFC 区域之内） 4、去除边距重叠现象，分属于不同的 BFC...时，可以阻止 margin 重叠 2.6 IFC 2.6.1 IFC基本概念 IFC: 行内格式化上下文 IFC基本概念： ?...都有效；（3）Box 垂直对齐方式：以它们的底部、顶部对齐，或以它们里面的文本的基线（baseline）对齐（默认，文本与图片对其），例：line-heigth 与 vertical-align。

2K3 0

使用CSS 3创建不规则图形

使用CSS创建的图形，无法内置文字或实现文字环绕效果。因此，如何实现不规则图形和文字复杂布局也成为了一个热议话题。今天我们就来介绍一下如何实现这个效果。...文章中我们将阐述如何使用 CSS创建不规则图形，实现不规则的文本布局。学会如何创建不规则图形之后，你就可以发挥想象力，创建唯美的CSS页面了，下图既是使用该技术创建的《爱丽丝梦游仙境》效果图： ?...实例-使用shape-outside 创建环绕于自定义形状的浮动文本我们从一个简单的例子开始。在实例中我们将创建一个自定义图形，并且内置文本流，最终效果图如下（文章末尾提供实例下载链接）： ?... div> div> 首先我们需要声明浮动区域的DIV节点，并且使用固定值设置大小。...图片中的透明部分将被声明为文本元素的浮动部分。其余部分被声明为不规则图形。

3.4K10 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭