1. 浮动简介
浮动定义:浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次。
2. 浮动结论
假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。
div的顺序是HTML代码中div的顺序决定的。
靠近页面边缘的一端是前,远离页面边缘的一端是后。
<style type="text/css"> .a { height: 100px; background-color: green; width: 100px; } .b { border: solid 2px skyblue; height: 100px; width: 200px; float: left; } .c { height: 200px; background-color: red; width: 100px; } </style> <body> <div class="a"></div> <div class="b"> </div> <div class="c"> </div> </body>
a元素保持不动,b元素浮动起来,c元素顶到b元素的位置。结合评论体会下
3.清楚浮动
3.1 清楚浮动结论
这个结论可以好好体会下
对于CSS的清除浮动(clear),一定要牢记:这个规则只能影响使用清除的元素本身,不能影响其他元素。
结合demo体会下:
3.2 清楚浮动4种方式
- 浮动:脱离文档流
float: right | left | none;
- 清除浮动
clear: left | right | both
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
- 浮动塌陷:父元素没有设置高度时,子元素都浮动,此时父元素的高度就为0了,因为没有子元素撑开高度(如果手动设置父元素高度就不会存在这种问题了)
<!--方式1:新增加个子元素 div clear: both --> <style type="text/css"> .father { background-color: pink; border: solid 2px skyblue; } .son1 { width: 100px; height: 200px; background-color: blue; float: left; } .uncle { height: 100px; background-color: red; } .son3 { clear: both; } </style> <div class="father"> <div class="son1"></div> <div class="son3"></div> </div> <div class="uncle"></div> <!--方式2. 给父元素增加(原理跟1一样)--> .clearfix::after{ content: '', // 因为默认的伪元素是行元素 display: block, clear: both } <!--方式3. 给父元素增加(溢出隐藏) --> overflow: hidden //(原理:因为overflow: hidden触发BFC规则,bfc去渲染页面时浮动的元素也参与计算高度) <!--方式4. 手动给父元素设置高度-->
4. 浮动练习总结
- 浮动元素的开始位置是从父元素内容区域开始的,不包含内外边距和边框
- 浮动元素内部可以再浮动
5. 参考系列