<!doctype html> <html> <head> <meta charset="utf-8"/> <title></title> <style> .container { background-color: red; overflow: hidden; width:200px; } p { margin: 10px 0; background-color: lightgreen; width:200px; } .newBFC { overflow: hidden; } </style> </head> <body> <div class="container"> <p> 1</p> <p> 2</p> <div class="newBFC"> <p> 3</p> </div> </div> </body </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>BFC浮動問題</title> <style> .one { /* 文檔流 裏面的文字標籤將父元素撐起來 */ background-color: pink; background-color: pink; overflow: hidden; } .two { float: left; } </style> </head> <body> <!-- 文檔流 從上到下,當遇到float、position:absolute時,會離開文檔流 --> <div class="one"> <div class="two">Hello World!</div> </div> 你好世界! </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"/> <title></title> <style> .dsj{height: 100px; width: 100px; float: left; background: #ff0} .jfj{ width: 200px; height: 200px; background: #eee; overflow:hidden; } </style> <body> <div class="dsj">1</div> <div class="jfj">2</div> </body> </html>