摘要：<!DOCTYPE html> <html> <head> <title>CSS中的浮动</title> <meta charset="utf-8"> <style type="text/css"> *{margin: 0px;
<!DOCTYPE html>
<html>
<head>
<title>CSS中的浮动</title>
<meta charset="utf-8">
<style type="text/css">
*{margin: 0px;padding: 0px;}
.clear{clear: both;}
.box1{height: 100px;width: 100px;border: 2px solid red;float: left;}
.box2{height: 100px;width: 100px;border: 2px solid red;float: left;}
.box3{height: 100px;width: 100px;border: 2px solid red;float: left;}
.box4{height: 100px;width: 100px;border: 2px solid red;float: left;}
.box5{height: 300px;width: 1500px;border: 2px solid red;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="clear"></div>
<div class="box5"></div>
</body>
</html>
批改老师：天蓬老师批改时间：2019-01-13 09:23:04
老师总结：<div class="clear"></div>, 添加新元素的方式来清除浮动,并不是一个好的解决方案, 第一,会增加一个页面元素,增加了页面渲染的负担,第二个生成的dom文档树中有一个无内容的元素, 这对于php等后端语言来渲染前端页面时, 造成一定的困扰
