浮动特性 1、浮动元素有左浮动(float:left)和右浮动(float:right)两种 2、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来 3、相邻浮动的块元素可以并在一行，超出父级宽度就换行...4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题) 5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果 6、父元素如果没有设置尺寸...(一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动 7、浮动元素之间没有垂直margin的合并 理解练习 1、两端对齐浮动 float:left 和 float:right...这就是经典的问题清除浮动。 为什么叫做清楚浮动呢？因为子元素只要不设置float，父元素是可以自动扩展的。 ? 注释了子元素的浮动的确可以解决，但是这样就无法使用浮动布局了。...清除浮动 ：子元素设置为浮动，父元素无法被撑开的这种情况 父级上增加属性overflow：hidden 在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐） 使用成熟的清浮动样式类
浮动是布局的时用到的一种技术，能够方便我们进行布局。...1、浮动的设置：css属性float：left/right/none 左浮动/右浮动/不浮动（默认） 2、浮动的原理：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘...3、浮动的影响：对附近的元素布局造成改变，使得布局混乱 因为浮动元素脱离了普通流，会出现一种高度坍塌的现象：原来的父容器高度是内部元素撑开的，但是当内部元素浮动后，脱离普通流浮动起来，那父容器的高度就坍塌...原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度。 优点：简单，代码少，浏览器支持好，不容易出现怪问题。...建议：推荐使用，建议定义公共类，以减少CSS代码。
文章目录 一、盒子模型位置摆放三大机制 - 普通流、浮动、定位 二、行内块元素的摆放缺陷 一、盒子模型位置摆放三大机制 - 普通流、浮动、定位 ---- 盒子模型位置摆放三大机制 : 普通流 : 默认的摆放样式...如 : div , p , h1 等 ; 行内元素 摆放 : 多个 行内元素 在同一行显示 , 排列顺序 从左到右 , 显示到边缘 自动换行 ; 如 : span , strong , a 等 ; 浮动...: 盒子模型 在 普通流 基础上 覆盖显示 , 多个 块级元素 可以在同一行 相互覆盖显示 ; 定位 : 盒子模型 在 浏览器 指定位置 显示 ; 普通流 相当于 Android 中的 线性布局 ;...浮动 相当于 Android 中的 帧布局 或 相对布局 或 约束布局 ; 定位 相当于 Android 中的 绝对布局 ; 二、行内块元素的摆放缺陷 ---- 行内块元素的摆放缺陷 : 缝隙无法控制...type="text/css"> /* 清除标签默认的内外边距 */ * { padding: 0; margin: 0; } div { display
前端技术栈更新太快，眼花缭乱，大家一个劲揽过来学习的时候，别忘了回头看看那些已经掌握的基础知识。 第一篇就整理整理CSS中很常见的浮动以及清除浮动的一些方式吧。 浮动到底是什么？...直到inline-block出来后，浮动也有它自己独特的使用场景。 浮动有哪些特征？ 浮动的特征就体现在前文的那句话中，别忘了默念三次！此外，浮动带来的负效果也算是它的特征之一。...// css.box-wrapper { border: 5px solid red; } .box-wrapper .box { float: left; width: 100px;...，并不占据文档流的位置，自然父元素也就不能被撑开，所以没了高度。...解决父元素高度坍塌的方式就是清除浮动，常规的方法是clear清除浮动和BFC清除浮动，推荐clearfix的方式。一定要弄清楚clear清除浮动的底层原理以及clearfix的那几行代码的具体作用。
（1）浮动元素在排列时只参考前一个位置即可 （2）右浮动的顺序问题 （3）浮动元素的重叠问题 a.浮动元素不会覆盖文字内容 b.浮动元素不会覆盖图片内容 图片本身也属于文本，可以将图片看作是一个特殊的文字...c.浮动元素不会覆盖表单元素
1.在知道孩子的高度时，给父亲加上高度，就会清除浮动 HTML ... CSS .father{ width: 500px...left; } .son-left{ float:left } .son-right{ float: right; } 2.定义一个空的div... CSS...因为overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动 清除浮动常用：overflow:hidden
文章目录 一、默认的标准流布局 二、浮动特性 - 脱离标准流布局、取消占用位置 三、浮动特性 - 显示模式类似于行内块元素 四、父容器中分别设置左右浮动效果 一、默认的标准流布局 ---- 默认的 标准流...块级元素 分别占用一行显示 , 排列顺序由上到下 ; 二、浮动特性 - 脱离标准流布局、取消占用位置 ---- 将 上面的 块级元素 设置为 浮动 , 则该元素 从 标准流 布局 中脱离,...; 浮动特性 ( 脱离标准流布局 ) : 浮动的元素 会 脱离 标准流布局 , 剩余的标准流布局正常显示 , 脱离的浮动元素在标准流上方显示 ; 浮动特性 ( 取消占用位置 ) : 脱离标准流 的 浮动元素...原来在标准流布局中的位置 , 也被取消 , 被后面的标准流元素占据 ; 网页中的 Display 显示模式有 3 种 ; 块级元素 行内元素 行内块元素 元素 的 浮动特性 会改变 该元素的 Display...- 显示模式类似于行内块元素 ---- 网页中的 Display 显示模式有 3 种 ; 块级元素 行内元素 行内块元素 浮动特性 ( 显示模式类似于行内块元素 ) : 元素 的 浮动特性 会改变 该元素的
浮动的工作原理 浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框则停留。...浮动元素可能引起的问题 1.父元素的高度无法被撑开，影响与父级元素同级的元素 2.与浮动元素同级的非浮动元素会跟随其后 3.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面的显示结构 清除浮动有什么解决办法...1.使用空标签清除浮动 在所有浮动标签后面添加一个空标签并定义CSS属性 clear:both 对比图：div未被撑开 ? ?...2.使用overflow 给包含浮动元素的父元素标签添加CSS属性，overflow:hidden or auto; zoom:1 ,其中zoom:1用于兼容IE6,目的是为了触发hasLayout...3.使用after伪对象清除浮动。 但该方法只适用于非IE浏览器，还要注意的是使用的时候要记得为需要清除浮动元素的伪对象设置height:0; 否则该对象会比实际高出若干像素。
浮动元素会脱离标准流（简称：脱标），在标准流中不占位置。...※ 相当于从地面飘到了空中，如果一个元素按照正常的标准流来显示，会在html中所属的位置上占位，后面的元素会紧跟着它，但是浮动脱离了标准流，以后我们在看到浮动的元素之后，不能以正常的标准流里进行判断。...浮动元素比标准流高半个级别，可以覆盖标准流中的元素。 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动。 浮动元素会受到上面元素边界的影响。...浮动元素有特殊的显示效果： ※ 一行可以显示多个，不管元素是行内元素还是块级元素，设置浮动后，将来显示的时候会在同一行内显示，除非一行放不下了，才会在第二行依次显示。...※ 可以设置宽高 注意点 浮动的元素不能通过 text-align:center 或者 margin:0 auto 让浮动元素本身水平居中。
css清除浮动的原因 原因分析 1、清除浮动是为了清除使用浮动元素的影响。高度塌陷的父元素。 如果一个块级元素没有设置height，它的height是由子元素打开的。...2、使用浮动后，子元素会脱离标准文档流，也就是说，父级元素中没有内容可以打开其高度，所以父级元素的height会被忽略。 这就是所谓的高度塌陷。 实例 以上就是css...清除浮动的原因，希望对大家有所帮助。...更多css学习指路：css教程 本文教程操作环境：windows7系统、css3版，DELL G3电脑。 收藏 | 0点赞 | 0打赏
对于浮动这篇文章解析的狠透彻 ~ 写在最前 习惯性去谷歌翻译看了看 float 的解释： ?...，也就是我们有时会纳闷的一点：设置浮动后，还是会挤占容器中的文本内容。...我们可以看到，设置absolute的容器，才是意义上的完全脱离正常文档流。覆盖在当前位置上的所有容器和文本内容之上。对比思考一下，会发现这又证明了float被设计出来的主要目的。...我故意让content显示出来，会发现伪元素清除浮动的核心原理其实是在给父元素增加块级容器，同时对块级容器设置clear属性，使其能够清除自身的浮动，从而正常按照块级容器排列方式那样排列在浮动元素的下面...其实，解决内部矛盾的原理和解决外部矛盾的第二种方式的原理是一样的，通过给被浮动影响的第一个元素进行清除浮动，就可以使后面的元素也不会受到浮动影响了。代码如下： <!
一、浮动布局 用 float 属性，可以实现元素（文字、图片等）的浮动显示功能，通过下面几个实例来展示浮动布局的效果以及浮动布局带来的一些问题？...Bow before my splendour, dear students, and go forth and learn CSS!...1、相邻元素 float布局，会影响后面的元素的排列，可以通过 clear 属性，进行清除。取消下面代码中的注释部分，即可看到修正后的效果。 <!...{ width: 26%; float: right; } /* 取消下面注释，即可看到 footer 回到预期最底部的位置... 四、参考文档 CSS 的浮动(float)布局是什么？
css浮动元素的重叠问题 说明 1、行内元素与浮动元素重叠，其边框、背景和内容将显示在浮动元素之上。 2、块级元素与浮动元素重叠时，边框和背景将显示在浮动元素下，内容将显示在浮动元素上。...background-color: lightgreen; border: 1px solid green; width: 700px; height: 500px; } 以上就是css...浮动元素的重叠问题，希望对大家有所帮助。...更多css学习指路：css教程 本文教程操作环境：windows7系统、css3版，DELL G3电脑。 收藏 | 0点赞 | 0打赏
1.直接设置父元素的高度 优点： 简单粗暴、方便。 缺点： 有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块等。...2.额外标签法 操作： 在父元素内容的最后添加一个块级元素 给添加的块级元素设置clear：both 缺点： 会在页面中添加额外的标签，会让页面的HTML结构变得复杂。...} .clearfix::after { clear: both; } 特点： 项目中使用，直接给标签加类即可，after用于清除浮动
css浮动元素的规则介绍 说明 1、当浮动元素浮动时，其margin不会超过包含块的padding。 如果想要超过元素，可以设置margin属性。...如果两个元素一个向左浮动，另一个向右浮动，左浮动元素的marginRight不会与右浮动元素的marginLeft相邻。 2、若有多个浮动元素，浮动元素将按顺序排列而不重叠。...blue; } 以上就是css...浮动元素的规则介绍，希望对大家有所帮助。...更多css学习指路：css教程 本文教程操作环境：windows7系统、css3版，DELL G3电脑。 收藏 | 0点赞 | 0打赏
css有哪些清除浮动的方法 说明 1、给父div定义高度。 原理：给父DIV定义固定高度，可以解决父DIV无法获得高度的问题。 2、使用空元素。...例如(.clear{clear:both}) 原理：添加一对空的DIV标签，使用css的clear:both属性去除浮动，让父DIV获得高度。 3、让父级div也一起浮起。...这可以初步解决当前的浮动问题。但也让父级浮动起来，又会产生新的浮动问题。不建议使用。 4、父级div定义display:table。 原理：强制将div属性转换为表格。...清除浮动的方法，希望对大家有所帮助。...更多css学习指路：css教程 本文教程操作环境：windows7系统、css3版，DELL G3电脑。 收藏 | 0点赞 | 0打赏
css浮动产生的负作用 1、背景不能显示（overflow:hidden）。...由于浮动产生，如果对父级设置了(css background背景)CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。...2、边框不能撑开，如果父级设置了CSS边框属性，子级里使用了float属性产生浮动，父级不能被撑开。 3、margin padding设置值不能正确显示。...由于浮动导致父级子级之间设置css padding，css margin 属性的值不能正确表达，特别是上下边的padding和margin不能正确显示。...浮动产生的负作用，希望对大家有所帮助。
文章目录 一、清除浮动需求 ( 没有设置高度的盒子且内部设置了浮动 ) 二、清除浮动代码示例 一、清除浮动需求 ( 没有设置高度的盒子且内部设置了浮动 ) ---- 如果盒子没有设置高度 , 并且盒子中还设置了浮动...*/ box-shadow: 2px 2px 2px rgba(0, 0, 0, .3); } 之前的盒子都设置了高度 , 因此其中虽然设置了浮动 , 但不会影响到后续的页面布局 ; 上述模型中 ,...没有设置高度 , 并且设置了浮动 , 如果不清除浮动 , 后续排列都会出现问题 ; 参考 【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析...) 【CSS】清除浮动 ④ ( 清除浮动 - 使用双伪元素清除浮动 | 代码示例 ) 博客清除浮动 ; 使用 /* 清除浮动 - 使用双伪元素清除浮动 */ .clearfix:before, .clearfix...; 清除浮动时 , 给要清除浮动的 父容器 , 设置 clearfix 样式 ; 二、清除浮动代码示例 ---- 首先 , 在 CSS 样式中 , 定义 使用双伪元素清除浮动 的样式 ; /* 清除浮动
08.05自我总结 一.盒子布局 1.盒子布局的组成 margin border padding content 2.margin margin是外边距，控制盒子的显示位置相对于他的上一级 left、top...padding，再考虑用margin 父子级顶端产生距离，建议使用padding margin、padding的参数auto自动获取留白区域适用根据留白地方居中使用 二.浮动布局 1.浮动布局 float...1.子集浮动参照父级宽度 2.子集浮动不再撑开父级高度 3.父级高度需要自己处理，否则会影响兄弟布局，采用清浮动处理 2.after|before after与before是伪类 他们与CSS选择器直接用...:连接 after元素出现后 before元素出现前 3.清浮动 父级清浮动，就是在自己宽度是否确定下，都能保证父级的高度刚刚好包裹子集 需要左右排列的block采用浮动布局，且父级一定要清浮动 方法一...: .浮动的标签:after { content: ''; display: block; clear: both; } 方法二: .浮动标签下一个要显示的标签(会受到他浮动影响的
p=594 接上回… 五、浮动的非本职工作 浮动的本职工作是让匿名inline boxes性质的文字环绕图片显示，而其他所有用浮动实现的效果都不是浮动应该做的事情，我称之为“非本职工作”。...所以浮动元素塌陷的问题根本就不是浏览器的bug，而是我们没有正确地深入地了解浮动，是我们自己使用不当，因为浮动本不应该用在这里的。...八、解决高度塌陷的问题 – 清除浮动 CSS中有个讨论较多的话题就是如何清除浮动，清除浮动其实就一个目的，就是解决高度塌陷的问题。为什么会高度塌陷？什么时候会高度塌陷？...所以呢，并不是只要有浮动元素就会坍塌，就要清除的，CSS水平高低衡量的标准之一就是改用什么样式就用什么样式，不多用也不少用。 下面就来讲讲如何清除浮动，zxx:写到这儿，一下子轻松了。...于是呢，我们可以用CSS代码生成一个具有clear属性的元素，其中的关键样式就是content了。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
