float 浮动提升层级。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> 浮动提升层级。 浮动提升半层。 一个元素分两层：上层是文字相关的东西（不提升），下层是盒模型相关的东西（提升）。 * { margin: 0; padding: 0; } div{ width: 200px; height: 200px; } #up{ float:left; background: pink; opacity: 50%; } #down{ /*float:left;*/ background: deeppink; } </style> </head> <body> <div id="up"> upupupup </div> <div id="down"> downdowndown </div> </body> </html>
原文：https://www.cnblogs.com/xiluhua/p/14395260.html