浮动与清除浮动
浮动
- float属性的取值
float : left | right | None | inherit
默认值 : none
适用于所有元素，没有继承性
- 浮动框的范围
浮动元素的外边距边界定义了浮动框的大小
浮动元素的包含块是其最近的块级祖先元素，且包含块的大小为该块级祖先元素的内容区
浮动元素的特点
1.浮动元素会脱离标准文档流(这就是为什么浮动元素不能撑开父元素的高，以及浮动元素会覆盖非浮动元素的原因)
2.浮动元素会生成一个块级框，而无论这个元素本身是什么(比如行内元素。因此行内元素一旦浮动，便能够为其设置宽高)
- 浮动元素的一些行为及规则(仅列出一些常用的)
1.浮动元素不能超出包含块的边界(不包括底边)，这就是为什么多个浮动元素出现在同一水平行时，一旦一行容不下后续的浮动元素，后续的浮动元素会换行的原因
但是，如果浮动元素本身的宽就大于包含块的宽，则允许超出
另外，为浮动元素设置负margin，使其超出包含块也是允许的
2.行内框与一个浮动元素重叠时，其边框、背景、内容都在该浮动元素外显示。块框与一个浮动元素重叠时，其边框、背景在该浮动元素之下显示，而内容在浮动元素之外显示
例如
<style type="text/css"> *{ margin: 0px; padding: 0px; } .div1{ width: 100px; height: 100px; float: left; background-color: red; } span{ background-color: blue; } </style> <body> <div class='div1'></div> <span>qwert</span> </body>
清除浮动
- 取值
clear : left | right | both | none | inherit
默认值 : none
适用于块级元素(一定注意)，无继承性
- 清除浮动的原理
如果元素设置了clear(非none与inherit值)，则用户代理会在元素上外边距的基础上再增加额外的间隔(这个间隔的术语叫‘清除区域’)，以将元素移到浮动框下边界的下面(刚好移到下边界即可)
这就是浮动元素不会覆盖清除浮动元素的原因
怎么使浮动元素也能撑开包含块的高
- 使包含块也浮动
原理是：浮动元素会延伸，从而包含其所有后代浮动元素
- 清除浮动
<style type="text/css"> *{ margin: 0px; padding: 0px; } .wrapper{ width: 100px; background-color: red; } .inner{ width: 50px; height: 50px; background-color: orange; float: left; } .flag-clear{ clear: both; } </style> <body> <div class='wrapper'> <div class="inner"></div> <div class="flag-clear"></div> </div> </body>
只要flag-clear在清除浮动后，逻辑上在inner后面即可，并不用给flag-clear设置大小。撑开的原理就是前面说的——flag-clear的上外边距会增加
- 伪元素与clear相结合(常用)
<style type="text/css"> *{ margin: 0px; padding: 0px; } .wrapper{ width: 100px; background-color: red; } .inner{ width: 50px; height: 50px; background-color: orange; float: left; } .wrapper::after{ content: ''; display: block; clear: both; } </style> <body> <div class='wrapper'> <div class="inner"></div> </div> </body>ps：本文案参考了以下书籍
《CSS权威指南》
原文发布时间：2018年06月29日 16:47:17
原文作者：earth_smallma
本文来源CSDN，如需转载请联系原作者
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
