摘要:清除浮动不清除浮动会怎么样效果子元素并没有撑开父容器,这就是我们要清除浮动的原因。
CSS清除浮动 不清除浮动会怎么样?
HTML:
CSS:
.container{ width: 300px; border: 1px solid #000; background-color: #aaa; } .left{ width: 100px; height: 100px; background-color: #ffff00; float: left; } .right{ width: 100px; height: 100px; background-color: #fa0000; float: right; }
效果:
子元素div并没有撑开父容器,这就是我们要清除浮动的原因。
在浮动元素后面添加 class 为 clear 的 空 div 元素,给这个 div 设置样式 .clear{clear:both;}
HTML:
CSS:
.clear{ clear:both; }
效果:
给父容器添加 overflow:hidden 或者 auto 样式
HTML:
CSS:
.container{ width: 300px; border: 1px solid #000; background-color: #aaa; overflow:hidden; /*或者auto */ zoom:1; /*IE6*/ }
效果:
给父容器添加 clearfix 的 class ,用 伪元素 clearfix:after 来设置样式,清除浮动
HTML:
CSS:
.clearfix{ zoom: 1; /*IE6*/ } .clearfix:after{ content: "."; height: 0; clear: both; display: block; visibility: hidden; }
效果:
给父容器添加浮动,这种方法用于本身父元素就是浮动的情况下,一般不使用这种方法,
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/50866.html
摘要:清除浮动不清除浮动会怎么样效果子元素并没有撑开父容器,这就是我们要清除浮动的原因。 CSS清除浮动 不清除浮动会怎么样? HTML: CSS: .container{ width: 300px; border: 1px solid #000; background-color: #aaa; } .lef...
摘要:中是这样定义的属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。其同样适用于设置属性为绝对定位或固定定位的内联元素。至于为什么,可以理解为内联元素没有盒模型,其高度由内容决定。 白话:即上一篇我脑中飘来飘去的css魔幻属性自己的文章推出之后,这是自己写的第四篇CSS相关的文章,文章绝大部分是自己工作总结得来,另一部分是平日sf回答的与面试中向面试官交流学到的,都是一...
摘要:用这种方法清除浮动,会为文档中增加不必要的结构,不推荐。可以包含浮动元素,所以能实现撑起高度的效果。以上是常用的几种方法,可以根据场景的不同选择适合的。 在页面布局中经常会用到浮动和清除浮动的操作,但之前是知其然而不知其所以然,看过多篇文章后,有了一些深入的了解,特整理下来! 浮动的目的: 最初设计浮动的目的是为了实现文字等内容可围绕图像显示,后来发现浮动方便布局,所以支持浮动任何元素...
摘要:浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。不浮动的浮动的三浮动之于块浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 一、前言 浮动元素以脱离标准流的方式来实现元素的向左或向右浮动,并且浮动元素还是在原来的行上进行浮动的。float浮动属性的四个参数:left:元素向左浮动;right:元素向右浮动;none:默认值,元素不浮动;i...
摘要:导致这一现象的最根本原因在于被设置了的元素会脱离文档流。脱离文档流可以理解为子元素与父元素间的结构被破坏,父子关系解除。 1.引言 对于我们所有的web前端开发人员,float是或者曾经一度是你最熟悉的陌生人——你离不开它,却整天承受着它所带给你的各种痛苦,你以为它很简单就那么一点知识,但却驾驭不了它各种奇怪的现象。这就是我们又爱又恨的——float。所以,系统的学一学float是非常...
阅读 3093·2021-09-10 10:51
阅读 3302·2021-08-31 09:38
阅读 1593·2019-08-30 15:54
阅读 3105·2019-08-29 17:22
阅读 3181·2019-08-26 13:53
阅读 1924·2019-08-26 11:59
阅读 3225·2019-08-26 11:37
阅读 3280·2019-08-26 10:47