开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

图像在添加了浮动/清除属性后会变大吗？

图像在添加了浮动/清除属性后不会变大。浮动属性是CSS中的一种布局方式，可以使元素脱离文档流并向左或向右浮动，其他元素会围绕浮动元素进行布局。清除属性用于清除浮动元素对其他元素布局的影响。

浮动属性和清除属性不会直接影响图像的大小。图像的大小由其在HTML中设置的宽度和高度属性决定，或者由CSS中的宽度和高度属性决定。浮动和清除属性只会影响图像在页面中的布局位置，不会改变其实际大小。

对于浮动属性，可以使用CSS中的float属性来设置图像的浮动方式，如float: left;表示向左浮动。对于清除属性，可以使用CSS中的clear属性来清除浮动元素对其他元素布局的影响，如clear: both;表示清除左右两侧的浮动元素对当前元素的影响。

总结起来，添加了浮动/清除属性后，图像的大小不会发生变化，只会影响其在页面中的布局位置。

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

有帮助

没帮助

相关·内容

「学习笔记」CSS基础

盒子会变大解决措施：通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小。...防止引起问题浮动(float)小结特点说明浮加了浮动的盒子「是浮起来」的，漂浮在其他标准流盒子的上面。漏加了浮动的盒子「是不占位置的」，它原来的位置「漏给了标准流的盒子」。...总结：由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响准确地说，并不是清除浮动，而是清除浮动后造成的影响清除浮动本质清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题...父级有了高度，就不会影响下面的标准流了清除浮动的方法选择器 { clear: 属性值; } clear 清除属性值描述 left 不允许左侧有浮动元素（清除左侧浮动的影响） right...清除浮动总结什么时候用清除浮动呢？父级没高度子盒子浮动了影响下面布局了，我们就应该清除浮动了。

3.2K3 0

大型编程电视剧连载 | CSS知识点硬核整理归纳（二）

五、盒子模型网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？ ? 其实网页布局的本质就是：首先利用CSS设置好盒子的大小，然后摆放盒子的位置。...padding属性用于设置内边距。 **是指边框与内容之间的距离。**当我们给盒子指定padding值之后，发生了2件事情：内容和边框有了距离，添加了内边距。盒子会变大了。...为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除 * { padding:0; /* 清除内边距 */ margin:0; /...6.3、浮动语法在 CSS 中，通过 float 属性定义浮动，语法如下：选择器 { float: 属性值; } 属性值描述 none 元素不浮动（默认值） left 元素向左浮动 right 元素向右浮动...float （浮漏特）特点说明浮加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。漏加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。

1.8K2 0

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

，不会随着滚动条而发生位置移动语法属性：position 取值：fixed 配合着偏移属性(top/right/bottom/left)实现位置的固定 2.浮动的效果浮动之后会怎么样...，是不会被浮动元素压在底下的，会巧妙的避开浮动元素浮动之后会有什么样的影响？...方案2 在父元素中，追加空子元素，并设置其clear属性为both clear是css中专用于清除浮动的属性作用：清除当前元素前面的元素浮动所带来的影响取值： 1、none 默认值...，不做任何清除浮动的操作 2、left 清除前面元素左浮动带来的影响 3、right 清除前面元素右浮动带来的影响 4、both 清除前面元素所有浮动带来的影响优势：代码量少...看代码和效果图，可以看出，这次的代码比上面的代码多了一行overflow:hidden;用这行代码触发新的BFC后，由于这个新的BFC不会与浮动的top重叠，所以bottom的位置改变了

1.5K6 0

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

举个常见的例子，列表显示，见下面的图，截自淘宝新版首页：我不看代码就知道是用浮动实现的，我用firebug一看，果然是，不仅浮动，而且定宽。...我们只要静下心来好好想想浮动的本质，实现的原理，就可以知道为什么浮动本不应该用来对页面进行布局。还记得上一部分所说的浮动的本质吗？即“包裹与破坏”。...理解了这个您就会明白为什么要是这里的图片添加了float属性，li高度会塌陷了：浮动破坏了inline box。这个后面会详细讲解。...现在，我是明白了，这么做是有他的道理的，难道要用一堆浮动的元素去布局吗？这不是浮动该干的事情。而且，浮动是个很不好惹的魔鬼。...由于现代浏览器都支持after伪类伪元素，所以常常也会用after写入一个clear属性的元素清除浮动。

5920 0

前端成神之路-浮动

语法在 CSS 中，通过 float 中文，浮漏特属性定义浮动，语法如下：选择器 { float: 属性值; } 属性值描述 none 元素不浮动（默认值） left 元素向左浮动 right...因为这是我们最常见的一种布局方式 float —— 浮漏特特点说明浮加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。...漏加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。...父级有了高度，就不会影响下面的标准流了 2.3 清除浮动的方法在CSS中，clear属性用于清除浮动，在这里，我们先记住清除浮动的方法，具体的原理，等我们学完css会再回头分析。...语法：选择器{clear:属性值;} clear 清除属性值描述 left 不允许左侧有浮动元素（清除左侧浮动的影响） right 不允许右侧有浮动元素（清除右侧浮动的影响） both 同时清除左右两侧浮动的影响

1.3K1 0

CSS 浮动（二）

2 为什么需要浮动？提问：我们用标准流能很方便的实现如下效果吗？如何让多个块级盒子(div)水平排列成一行？...网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动 3 什么是浮动？ float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。...语法：选择器 { float: 属性值; } 4 浮动特性（重难点）加了浮动之后的元素,会具有很多特性,需要我们掌握的....所以在有些场景，我们得清除浮动清除浮动本质: 清除浮动的本质是清除浮动元素造成的影响如果父盒子本身有高度，则不需要清除浮动清除浮动之后，父级就会根据浮动的子盒子自动检测高度。...，将其属性值设置为 hidden、 auto 或 scroll 。

1331 0

回炉重造，css常规布局系统整理——实战开发后复盘小结

块级元素：display:bloak；占据一行，下一个元素自动换行，如div等；行内元素：display:inline；元素没有高宽，根据元素内的内容改变大小，如span、a标签等；行内块：...清除浮动： clear：both 因为float定位他是浮起来的嘛，这个位置就是空的，而clear：both会清除浮动，默认为正常的文档流，这样后面的元素就可正常排列了（可以自己在代码中去体验）。...div.child{ width: 100px; height: 100px; background-color: blue; float: left; margin: 5px; } // 清除浮动...3.2.3 项目属性# 前面我们介绍的是写在容器上的属性，写完之后会作用于容器里面的项目排列布局样式。而项目属性是写在项目上的。...将覆盖容器的 align-items 属性所设置的默认对齐方式。 3.3 flex布局应用# 3.3.0 实例代码运行效果图# 3.3.1 实例HTML源码# <!

2.2K2 0

谈谈CSS的浮动问题

浮动元素可能引起的问题 1.父元素的高度无法被撑开，影响与父级元素同级的元素 2.与浮动元素同级的非浮动元素会跟随其后 3.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面的显示结构清除浮动有什么解决办法...1.使用空标签清除浮动在所有浮动标签后面添加一个空标签并定义CSS属性 clear:both 对比图：div未被撑开 ? ?...加个空标签就可以，弊端是增加了无语义标签 html,body,div{ margin: 0;padding: 0;} .box{border...3.使用after伪对象清除浮动。但该方法只适用于非IE浏览器，还要注意的是使用的时候要记得为需要清除浮动元素的伪对象设置height:0; 否则该对象会比实际高出若干像素。...，但这整体又浮动了所以不推荐~ 5.还有一种就是直接给浮动的元素添加属性 display：table; FF Chrome等支持，IE6/IE7测试显示不支持~ 所以还得触发hasLayout ,加上

6191 0

CSS浮动知识

语法在 CSS 中，通过 float 中文，浮漏特属性定义浮动，语法如下：选择器 { float: 属性值; } 属性值描述 none 元素不浮动（默认值） left 元素向左浮动...因为这是我们最常见的一种布局方式特点说明浮加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。漏加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。...所以：由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响准确地说，并不是清除浮动，而是清除浮动后造成的影响清除浮动本质清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0...父级有了高度，就不会影响下面的标准流了清除浮动的方法在CSS中，clear属性用于清除浮动，在这里，我们先记住清除浮动的方法，具体的原理，等我们学完css会再回头分析。...语法：选择器{clear:属性值;} clear 清除属性值描述 left 不允许左侧有浮动元素（清除左侧浮动的影响） right 不允许右侧有浮动元素（清除右侧浮动的影响） both 同时清除左右两侧浮动的影响

1.7K2 0

The Mystery Of The CSS Float Property

清除浮动 - Clearing Floats 使用浮动所带来的布局问题可以通过使用CSS的clear属性来解决，这可以让你清除某个元素左侧的或者右侧的浮动元素。...解决方案3：after伪元素 - SOLUTION 3: THE :AFTER PSEUDO-ELEMENT :after伪元素给HTML页面添加了一个元素。这个方法经常被用来解决清除浮动的问题。...但是几乎任何的浮动清除问题通过上述方法中某一个都可以被解决。...sprite图的水平导航条时是一个关键因素。...总结 - Conclusion 就像在一开始提到的那样，不使用CSS的float属性时，table-less的布局在最坏的情况下会变得不可能，在最好的情况下会变得不可维护。

1.7K2 0

CSS入门？一篇就够了！

float 浮漏特浮：加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。漏：加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏给了标准流的盒子。...一列固定宽度且居中最普通的，最为常用的结构两列左窄右宽型通栏平均分布型清除浮动为什么要清除浮动准确地说，并不是清除浮动，而是清除浮动后造成的影响清除浮动本质清除浮动主要为了解决父级元素因为子级浮动引起内部高度为...清除浮动的方法其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。...在CSS中，clear属性用于清除浮动，其基本语法格式如下：选择器{clear:属性值;} 属性值描述 left 不允许左侧有浮动元素（清除左侧浮动的影响） right 不允许右侧有浮动元素（清除右侧浮动的影响...，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块模式，因此比如行内元素如果添加了绝对定位或者固定定位后浮动后，可以不用转换模式，直接给高度和宽度就可以了。

5.2K2 0

浅析inline-block--使用inline-block创建布局

意思是默认情况下一个div的宽度是以100%显示的，而一旦给这个div添加了postion:absolute属性，则100%的默认宽度会变成自适应的内部元素宽度。...而包裹性的作用很多，其中一个是可以使用其来清除元素的浮动。　　...浮动是唯一的解决方案吗? 　　浮动通常表现正常，但有时候搞起来会很纠结。特别是处理内部容器中的浮动，比如对一排图片使用浮动后对齐出现问题。So，inline-block是我们的另一种选择。...使用这种属性可以模拟部分浮动的特征，而不需要处理一些浮动带来的问题。　　这里极力推荐一篇张鑫旭的文章：拜拜了浮动布局-基于display:inline-block的列表布局。...因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。

1.1K7 0

5分钟快速回顾HTML CSS

通过定位属性fix, absolute都可以将元素转换为内联块 (二)盒子模型 1.盒子图 ?...Photoshop中的图层属性,数值越大越靠上,实际开发过程中,取值从1000开始,每次增加一百,如果意外增加了需求,预留的100个层级可插入新的需求层 5.一些细节: absolute,fix能把元素变成内联块...position还有一个默认值为static (二)浮动注意点: 浮动元素有左浮动(float:left)和右浮动(float:right)两种浮动元素碰到父元素边界或其他元素才会停下来父元素必须清除浮动...,形成文字绕图效果常见需求: 一组子元素,同时左浮动;同时右浮动;最后一个右浮动,其它左浮动 (三)引入方式 1.内联式(新手模式) <div style="color:red;width:100px...important 权重1000:内联样式 style 权重100:ID选择器权重10:伪类, :hover 权重为1:div.p (五)容易忘的<em>属性</em> 字体 color: red; <em>清除</em>下划线

1.3K9 0

css笔记

漏：加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏给了标准流的盒子。...准确地说，并不是清除浮动，而是清除浮动后造成的影响如果浮动一开始就是一个美丽的错误，那么请用正确的方法挽救它。清除浮动本质清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。...清除浮动的方法其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。...在CSS中，clear属性用于清除浮动，其基本语法格式如下：选择器{clear:属性值;} clear 清除属性值描述 left 不允许左侧有浮动元素（清除左侧浮动的影响） right 不允许右侧有浮动元素...存储为web设备所用格式辅助线和切片使用及清除视图菜单-- 清除辅助线/ 清除切片切图插件 Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工

7.7K5 0

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

去掉容器z1的float属性，增加了position属性，代码如下 <!...这里我故意在伪元素的content写了一些文本内容，同时加了背景色，有点像基佬色。。。 ---- OK，先看整体效果图吧: ? 不出意外，从上图可以看到，外部矛盾被解决了。...不过有个很重要，content这个属性，必须要写，不写content，是没法清除浮动的。 ---- 最重要的知识点要来了，请看两个截图： ?...我故意让content显示出来，会发现伪元素清除浮动的核心原理其实是在给父元素增加块级容器，同时对块级容器设置clear属性，使其能够清除自身的浮动，从而正常按照块级容器排列方式那样排列在浮动元素的下面...同时给这个块级子容器设置 clear 属性来清除其浮动，这样这个子容器就能排列在浮动元素的后面，同时也把父元素的高度撑起来了。那么父元素的同级元素也能正常排列了。

9822 0

从零开始学 Web 之 CSS（三）链接伪类、背景、行高、盒子模型、浮动

*/ ：focus{属性:值；} /*获取焦点*/ 注意： 1.a:visited之后要想回到之前的状态，需要清除缓存。...： /*背景颜色*/ background-image： /*背景图片*/ background-size: /*调节背景大小（一般用于美工给的背景图大于需要的尺寸，设置此属性，调节背景图大小...4、清除浮动清除浮动不是不用浮动，清除浮动产生的问题。问题：当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误（占据父盒子的位置）。...方法二给浮动元素的父集元素使用overflow:hidden; ? 注意：如果有内容出了盒子，不能使用这个方法。方法三（推荐使用）伪元素清除浮动。 ?...: after 相当于在当前盒子后加了一个盒子。

5964 0

css常用布局系统整理——实战开发后复盘小结

块级元素：display:bloak；占据一行，下一个元素自动换行，如div等；行内元素：display:inline；元素没有高宽，根据元素内的内容改变大小，如span、a标签等；行内块...清除浮动： clear：both 因为float定位他是浮起来的嘛，这个位置就是空的，而clear：both会清除浮动，默认为正常的文档流，这样后面的元素就可正常排列了（可以自己在代码中去体验）。...background-color: blue; float: left; margin: 5px; } // 清除浮动...3.2.3 项目属性前面我们介绍的是写在容器上的属性，写完之后会作用于容器里面的项目排列布局样式。而项目属性是写在项目上的。...将覆盖容器的 align-items 属性所设置的默认对齐方式。 3.3 flex布局应用 3.3.0 实例代码运行效果图 3.3.1 实例HTML源码 <!

1.4K4 0

104道 CSS 面试题，助你查漏补缺（上）

[28] 29.请解释一下为什么需要清除浮动？清除浮动的方式[29] 30.使用 clear 属性清除浮动的原理？[30] 31.zoom:1 的清除浮动原理?...浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。清除浮动的方式（1）使用clear属性清除浮动。参考28。（2）使用BFC块级格式化上下文来清除浮动。参考26。...（9）css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。...: #28ifc-是什么 [29] 29.请解释一下为什么需要清除浮动？清除浮动的方式: #29请解释一下为什么需要清除浮动清除浮动的方式 [30] 30.使用 clear 属性清除浮动的原理？...: #30使用-clear-属性清除浮动的原理 [31] 31.zoom:1 的清除浮动原理?: #31zoom1-的清除浮动原理 [32] 32.移动端的布局用过媒体查询吗？

2.1K1 0

CSS布局(四) float详解

第二个demo，唯一的区别就在于加了float:left，上层的却出现了“坍塌”现象。 ? 　　...你刚才不是说了float的初衷就是实现文字环绕效果吗？和破坏性有啥关系？　　这时我会反问你：如果float不让父元素坍塌，能实现文字环绕效果吗？给你两个图看看你就知道了。 ? 2.2. ...三、清除浮动 float具有“破坏性”，它会导致父元素“坍塌”，这将不是所要看到的。如何去避免float带来的这种影响呢（也就是我们常说的“清除浮动”）？...究其原理，其实就是通过伪元素选择器，在div后面增加了一个clear:both的元素，跟第三种方法是一个道理。...4.浮动的应用（使用float做网页布局） 1.设置float属性后，元素实际上会inline-block块状化 2.可以去掉排列间的空格 ? ?

1.5K8 0

《精通CSS》第3章可见格式化模型

这时候添加边框和内边距并不会影响内容盒子的大小，而是会导致整个盒子变大。...很简单，我们可以通过clear属性的left、right、both、none来指定盒子的哪一侧不应该紧挨着浮动盒子。具体的清除效果，大家可以自己试一下。...清除浮动时，浏览器会在这个元素的上方添加足够的外边距，从而将元素的上边缘垂直向下推移到浮动元素下方。如下图所示。...所以，如果想给“已清除浮动的”元素添加外边距，除非添加的值超过自动添加的值，否则看不出有效果。 ? 文字环绕效果-清除浮动后前面我们提到了元素塌陷，这个也可以通过clear的这一特性来解决。...可以在发生塌陷的父元素内添加一个空的元素，并清除浮动，这时空的元素前面会留下足够的空间来容纳浮动元素。 ?

1.3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭