浮动和包含框的关系,伪元素after解决高度塌陷
浮动会使元素尽量向左或向右移动,直到碰到包含框或另外一个浮动元素的盒子模型的边缘
包含框并不会改变里面浮动元素的宽高,浮动元素宽高不会限制在包含块以内
<!DOCTYPE html> <html> <head> <style type="text/css"> * { margin:0; padding:0; } .container { width:110px; height:100px; border:1px solid blue; } .block1 { width:500px; height:50px; border:1px solid red; float:right; } </style> </head> <body> <div class="container"> <div class="block1"><span>块1</span></div> </div> </body> </html>
上例中,block1会保持500px的宽度,但container并不会移动位置让block1显示完全,container位置不会变,block1超出container部分会绘制到浏览器左侧以外看不到
把float改为left,就可以清晰看到block1超出container边框
但是,浮动元素会尽量使自己绘制在包含框内
以下block2会另起一行,而不是接着block1,因为另起一行会使block2超出包含框少一点
<!DOCTYPE html> <html> <head> <style type="text/css"> * { margin:0; padding:0; } .container { width:110px; height:100px; border:1px solid blue; } .block1 { width:50px; height:50px; border:1px solid red; float:left; } .block2 { width:100px; height:50px; border:1px solid red; float:left; } </style> </head> <body> <div class="container"> <div class="block1"><span>块1</span></div> <div class="block2"><span>块2</span></div> </div> </body> </html>
块级浮动元素的宽高如果不设置,他们的宽高就由内容决定(类似内联元素),这个跟普通块级元素不一样(普通块级元素宽会充满父元素,高由内容决定)
包含块的高度如果不设置,里面全部是浮动元素的话,因为浮动元素时脱离文档流的,就会出现高度为0的情况,即高度塌陷
比如:
<!DOCTYPE html> <html> <head> <style type="text/css"> * { margin:0; padding:0; } .container { border:1px solid blue; } .block1 { width:100px; height:50px; border:1px solid red; float:left; } .block2 { width:100px; height:50px; border:1px solid red; float:left; } </style> </head> <body> <div class="container"> <div class="block1"><span>块1</span></div> <div class="block2"><span>块2</span></div> </div> </body> </html>
可以在后面加一个div,使用clear清除浮动,撑起包含块
<!DOCTYPE html> <html> <head> <style type="text/css"> * { margin:0; padding:0; } .container { border:1px solid blue; } .block1 { width:100px; height:50px; border:1px solid red; float:left; } .block2 { width:100px; height:50px; border:1px solid red; float:left; } .block3{ clear: both; } </style> </head> <body> <div class="container"> <div class="block1"><span>块1</span></div> <div class="block2"><span>块2</span></div> <div class="block3"><span></span></div> </div> </body> </html>
这种方式比较别扭,一般使用伪元素解决
::after 伪元素在元素最后添加内容(::begin在元素最前面添加内容)
<!DOCTYPE html> <html> <head> <style type="text/css"> * { margin:0; padding:0; } .container { border:1px solid blue; } .block1 { width:100px; height:50px; border:1px solid red; float:left; } .block2 { width:100px; height:50px; border:1px solid red; float:left; } .clearfix::after{ display: block; content: ""; clear: both; } </style> </head> <body> <div class="container clearfix"> <div class="block1"><span>块1</span></div> <div class="block2"><span>块2</span></div> </div> </body> </html>
after默认为inline元素,inline元素的clear不起作用,所以要改成block元素
同时还要对after设置内容(content,此处只为清浮动,设置内容为空即可),否则无效