摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css中的浮动</title> <style type="text/css"> *{margin:&nbs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css中的浮动</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.box1{height: 40px;width: 90px;background: gray;float: left;line-height: 40px;margin: 0px 1px;text-align: center;}
.row{height: 40px;width: 120px;background: pink;display: none;}
.clean{clear: both;}
.box1:hover .row{display: block;}
.box2{height: 30px;width: 460px;text-align: center;background: red;line-height: 30px;}
</style>
</head>
<body>
<div class="box1">HTML
<div class="row">块级元素</div>
<div class="row">行内元素</div>
<div class="row">行内块元素</div>
</div>
<div class="box1">CSS
<div class="row">内联样式</div>
<div class="row">内部样式</div>
<div class="row">外联样式</div>
</div>
<div class="box1">JavaScript
<div class="row">字符串</div>
<div class="row">字典</div>
<div class="row">元组</div>
</div>
<div class="box1">jQuery
<div class="row">1</div>
<div class="row">2</div>
<div class="row">3</div>
</div>
<div class="box1">PHP
<div class="row">1</div>
<div class="row">2</div>
<div class="row">3</div>
</div>
<div class="clean"></div>
<div class="box2">*****************</div>
</body>
</html> 批改老师：天蓬老师批改时间：2019-03-08 09:38:39
老师总结：在css中, 浮动是元素脱离文档流, 然后重新排列的重要手段, 也是布局的前提之一, 但要注意, 浮动起来之后, 内联元素就支持宽高了
