CSS: BFM
作者:互联网
BFC:
block formatting context
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container{ border:3px inset palegoldenrod; /* position: fixed; */ /* overflow: auto; */ /* float: left; */ display: flex; } .cube{ width: 100px; height: 100px; background: peru; margin: 100px; float: left; } </style> </head> <body> <div class="container"> <div class="cube"></div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .float { width: 100px; height: 100px; background-color: palegoldenrod; float: left; } .normal { /* overflow: auto; */ /* float: left; */ /* position: ; */ display: inline-block; width: 200px; height: 200px; background-color: indianred; } </style> </head> <body> <div class="float"></div> <div class="normal"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { background: palegreen; overflow: auto; } .container img { float: left; width: 300px; } .container p{ /* display: table; */ overflow: hidden; background-color: indianred; } </style> </head> <body> <h1>BFC</h1> <div class="container"> <img src="bb.png" alt=""> <p>rtuo...</p> </div> </body> </html>
外边距塌陷 可给父元素border-top
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { /* float: left; */ /* overflow: auto; */ /* display: inline-block; */ /* position: absolute; */ border-top: 1px groove indianred; width: 200px; height: 200px; background-color: lightcoral; } .box div { width: 100px; height: 100px; background-color: aqua; margin-top: 50px; } </style> </head> <body> <!-- 1. 普通流 2. 定位流 3. 浮动流 BFC --> <div class="box"> <div></div> </div> </body> </html>
内容塌陷
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { /* overflow: scroll; */ /* float: left; */ /* display: flex; */ /* position: absolute; */ background-color: palegreen; border: 1px inset coral; } .box div { float: right; width: 100px; height: 100px; background-color: cyan; } </style> </head> <body> <div class="box"> <div></div> </div> </body> </html>
标签:color,float,100px,BFM,width,background,CSS,left 来源: https://www.cnblogs.com/dissipate/p/16024365.html