<!doctype html> <html> <head> <meta charset="utf-8"> <title>h5</title> <style type="text/css"> body,html{ width:100%; height:100%; // background-color:blueviolet; } .box{ background-color: aqua; width:100%; min-height:100px; max-height:600px; height: auto !important; height: 500px; } .name{ background-color: red; height: 20%; } .name:after{ content:"后面的伪对象"; } .name:before{ content:"前面的伪对象"; } .name:first-letter{ color:blue; } .name:first-line{ color:#031E27; font-size:35px; } .clear{ border:3px solid #876262; } .clear .class2{ width:500px;height: 500px;float:left;background-color: blue } .clear .class{ width:500px;height: 500px;float:right;background-color:#2F6C26 } .cle:after{ content:"."; display: block; width:100%; height:0; overflow: hidden; clear: both; visibility: hidden; } </style> </head> <body> <div class="clear cle"> <div class="class"></div> <div class="class2"></div> </div> </body> </html>