快速理解浮动对标准流的影响

一、浮动对标准流的影响

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>浮动和标准流</title><style type="text/css">.container{width: 600px;height: 600px;border: 1px solid blue;}.item-1{width: 100px;height: 100px;background-color: red;}.item-2{width: 200px;height: 200px;background-color: yellow;    }.item-3{width: 300px;height: 300px;background-color: green;}</style></head><body><div class="container"><div class="item-1"></div><div class="item-2"></div><div class="item-3"></div></div></body>
</html>

正常效果

如果第一个盒子左浮动，其他盒子不浮动时

解释：因为第一个盒子在浮动层，第二和第三个盒子在标准层故按标准流的形式排列，因为第二个盒子是块级元素，独占一行。故第三个盒子另起一行。
如果第二个盒子左浮动，其他盒子不浮动时

解释：跟第一个盒子类似
如果第三个盒子左浮动，其他盒子不浮动时

解释：跟第一个盒子类似

总结：根据上面三个例子可以得出：浮动流只会对后者的标准流产生影响，前者不产生影响，更重要的是浮动元素不占用原有标准流的位置。

欢迎访问我的个人博客

快速理解浮动对标准流的影响相关推荐

html的浮动跟标准流,网页布局的标准流浮动流与定位流
一网页布局方式 #1.什么是网页布局方式布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如word,nodpad 等等而网页的布局方式指的就是浏览器这款工具是如何对网页中的元 ...
前端知识-CSS定位机制:标准流、浮动、定位
标准流从上到下依次排列浮动脱离标准流,不占位置,但影响标准流,但是文字会环绕而非到浮动元素下面. 在最近父元素内浮动,不超过父元素的padding只在content内浮动浮动是的元素显示模式变 ...
Web前端入门（十九）传统网页布局式之标准流、浮动
总目录:https://blog.csdn.net/treesorshining/article/details/124725459 文章目录 1.标准流 2.浮动 2.1 浮动概述 2.2 浮动的特 ...
BFC机制关联浮动与脱离标准流
脱离标准流的方式 1:浮动2:绝对定位3:固定定位, 脱离标准流之后定位的元素,会覆盖浮动的元素, 故此定位的比浮动的脱标等级高. 且在清除脱标带来的影响中,浮动的元素,可以被除浮动的方式来解决对父盒 ...
三、关于网页布局你该知道这些！（布局总结：标准流、浮动、定位）
一个完整的网页,是标准流.浮动.定位一起完成布局的,三者都有自己专门的用法. 标准流可以让盒子上下排列喝着左右排列,垂直的块级盒子显示就用标准流布局. 浮动可以让多个块级元素一行显示或者左右对齐盒 ...
浮动元素经常和标准流父级搭配使用（HTML、CSS）
浮动元素经常和标准流父级搭配使用(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><met ...
CSS核心内容-标准流、盒子模型、浮动、定位
CSS核心内容-标准流.盒子模型.浮动.定位,了解了核心内容才能用CSS设计出一个简单的页面一.基础在了解核心内容之前需要先了解HTML中的两种标签:块级元素,行内元素: 块级元素:一个块级元素占 ...
脱离标准流(1)浮动
标准流里面的限制非常多,导致很多页面效果无法实现.如果我们现在就要并排.并且就要设置宽高,那该怎么办呢?办法是:移民!脱离标准流! css中一共有三种手段,使一个元素脱离标准文档流: (1)浮动 (2 ...
CSS核心内容：标准流、盒子模型、浮动、定位
目录一.标准流块级元素行内元素与HTML元素之间的区别二.盒子模型三.浮动(Float) 四.定位(Position) 一.标准流标准流指的是元素排版布局过程中,元素会默认自动从左往右, ...
java标准i o重定向_Java I/O(二)其他常用的输入输出流PrintStream等、标准流重定向...
四.FilterOutputStream.PrintStream PrintStream是继承自FilterStream类的,例如标准输出流System.out就是著名的PrintStream类对象. ...

快速理解浮动对标准流的影响

一、浮动对标准流的影响

快速理解浮动对标准流的影响相关推荐

最新文章

热门文章