浮动 float 记住设置浮动 后 一定要清除

Original 2019-03-25 00:09:22 514
abstract:<!DOCTYPE html><head> <meta charset="UTF-8"> <title>CSS中的浮动</title> <link rel="shortcut icon" type="image/x-icon" href="../Public/im

<!DOCTYPE html>

<head>

<meta charset="UTF-8">

<title>CSS中的浮动</title>

<link rel="shortcut icon" type="image/x-icon" href="../Public/images/2.1.png">

<!-- 外部样式 -->

<link rel="stylesheet" type="text/css" href="../Public/css/2.1.css">

<!-- 内部样式 -->

<style type="text/css">

/* float: left; 左浮动 浮动属性会脱离文档普通流 一定要清除浮动 */

ul li{

list-style: none;

width: 100px;

height: 40px;

line-height: 40px;

text-align: center;

background: #ccc;

margin: 0 1px;

float: left;

}

.box1{width: 200px;height: 200px;background:red; float: right;}

/* .clear{clear: both;} left清除左边浮动 right清除右边浮动 both清除两边浮动 */

.clear{clear: both;}

</style>

</head>

<body>

<ul>

<li>html</li>

<li>css</li>

<li>JavaScript</li>

<li>jQuery</li>

<li>php</li>

</ul>

<div class="clear"></div>

<div class="box1">div1</div>

<div class="box1">div2</div>

<div class="box1">div3</div>

</body>

</html>


Correcting teacher:查无此人Correction time:2019-03-25 09:24:44
Teacher's summary:完成的不错。浮动在css里比较常用,要牢记。继续加油

Release Notes

Popular Entries