如果想要对网页进行布局,那么比不可少的必须用到浮动。
浮动的特性:脱离了标准的文档流。
对于块级元素如span想要进行宽度和高度的改变,就可以对span进行浮动。
浮动之后不存在块级元素和行级元素,所有的元素都是平等的。
父元素浮动子元素不会浮动《不同于JAVA的继承》
(重点)浮动元素会被动的覆盖其他非浮动元素,但是不会覆盖其他非元素的内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> h1{ width: 200px; height: 200px; background-color: red; } div{ float: left; width: 400px; height: 100px; background-color: black; } </style> <body> <div></div> <h1></h1> </body> </html>
(重点)浮动的元素不会去主动覆盖其他的非浮动元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> h1{ width: 200px; height: 200px; background-color: red; } div{ float: left; width: 400px; height: 100px; background-color: black; } </style> <body> <h1></h1> <div></div> </body> </html>
浮动没有外边距合并(非浮动外边距会合并)
浮动没有外边距的塌陷
浮动元素会自动贴边
清除浮动的方法:
为什么要清除浮动?
因为一个盒子容器里面有一个脱标的元素
想一下,假如里面那个元素脱标了,那么就代表这个元素已经不属于标准文档流的范畴了
所以他不会占用实际的物理空间,所以盒子容器不会被这个脱标的元素所撑开空间,这时候会导致有些东西显示不出来,比如你给容器加的背景颜色就会显示不出来,因为这个盒子容器已经没有高度了。
解决方法:
1.事先给盒子容器定义一个高度(一般不赞成使用)
2.给盒子添加overflow:hidden(偏方,但也不赞成使用)
3.给盒子也添加浮动(绝对不赞成)
4.clear 属性(none:允许两边都有浮动 both:清除两边都没有浮动 left:清除左边浮动的影响 right:清除右边浮动影响)(还行,但是marrgin top,buttom失效 因为父容器还是没有高度)
5.
<style type="text/css"> .clearFix{} .clearFix::after{ clear: both; } .clearFix::before,clearFix::after{ content: ""; display: block; } </style>(国际通用)