前言：
现在咱们对“css浮动为什么还是从上到下”大致比较珍视，咱们都想要学习一些“css浮动为什么还是从上到下”的相关文章。那么小编同时在网上汇集了一些有关“css浮动为什么还是从上到下””的相关内容，希望各位老铁们能喜欢，姐妹们快快来了解一下吧！4、浮动
本章目标：
会使用display属性排版网页元素会使用float属性排版网页元素会使用float属性创建横向多列布局会使用四种防止父级边框塌陷的清除浮动的方法4.1、标准文档流
标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式
标准文档流组成
块级元素（block） <h1>…<h6>、<p>、<div>、列表内联元素（inline） <span>、<a>、<img/>、<strong>... 内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立4.2、display
display属性
在这里插入图片描述
display:block;
在这里插入图片描述
display:inline;
在这里插入图片描述
display:inline-block;
在这里插入图片描述
display:none;
在这里插入图片描述
display特性
块级元素与行级元素的转变（block、inline）控制块元素排到一行（inline-block）控制元素的显示和隐藏（none）
【学员操作—制作QQ会员页面导航】
导航背景颜色为黑色半透明效果鼠标移入“功能特权”等导航信息时文字颜色变为蓝色，无下划线“登录”部分信息使用超链接实现，添加圆角边框，鼠标移入字体颜色加深，添加背景颜色为黄色
在这里插入图片描述
块元素排在一行的方法
可以使用什么属性使块元素排在一行？
inline-blockfloat
刚刚学过的inline-block；然后介绍还有一种方式可以实现让块元素排在一行。引出浮动。
4.3、浮动
float属性
在这里插入图片描述
<body><div id="father"> <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div> <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div> <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div> <div class="layer04">浮动的盒子……</div></div></body>
左浮动
.layer01 { border:1px #F00 dashed; float:left;}.layer02 { border:1px #00F dashed; float:left;}.layer03 { border:1px #060 dashed; float:left;}右浮动
.layer01 { border:1px #F00 dashed; float:right;}.layer02 { border:1px #00F dashed; float:right;}4.4、边框塌陷layer04设置宽度和右浮动后，为什么边框塌陷了？怎么解决？
浮动元素脱离标准文档流清除浮动
clear属性
在这里插入图片描述
.layer04 { clear:both; #清除两侧浮动}.layer04 { clear:left; #清除左侧浮动}.layer04 { clear:right; #清除右侧浮动}未清除浮动：
在这里插入图片描述
清除浮动：
在这里插入图片描述
解决父级边框塌陷的方法
clear属性可以清除浮动对其他元素造成的影响，可是依然解决不了父级边框塌陷问题，怎么办？
浮动元素后面加空div
设置父元素的高度
父级添加overflow属性（溢出处理)
在这里插入图片描述
hidden属性值，这个值在网页中经常使用，通常与< div>宽度结合使用设置< div>自动扩展高度，或者隐藏超出的内容
父级添加伪类after
小结
【清除浮动，防止父级边框塌陷的四种方法】
浮动元素后面加空div简单，空div会造成HTML代码冗余设置父元素的高度简单，元素固定高会降低扩展性
父级添加overflow属性简单，下拉列表框的场景不能用
父级添加伪类after写法比上面稍微复杂一点，但是没有副作用，推荐使用
【学员操作】
在这里插入图片描述
注：这部分有点难懂，大家最好敲一遍。
4.5、inline-block和float区别display:inline-block可以让元素排在一行，并且支持宽度和高度，代码实现起来方便位置方向不可控制，会解析空格IE 6、IE 7上不支持
float可以让元素排在一行并且支持宽度和高度，可以决定排列方向float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式
4.6、小结
在这里插入图片描述
标签： #css浮动为什么还是从上到下
