当父元素没有设置宽度和高度时,其高度会随着里面的子元素的内容自适应,宽度为浏览器的宽度。而当其所有子元素设置浮动属性时,子元素会全部在同一行显示,直到浏览器的边缘才会换行。这时如果其中一个子元素开始,之后的子元素全部换行时,有两种方法:
为了方便理解,我们通过实现计算器数字界面来演示
1、给父元素设置宽度
给父元素加了宽度之后,当子元素遇到父元素的宽度边缘时,自动换行。不过这个方法会比较麻烦,我们需要设置数个不同行的父元素。
在此就不演示了
2、给子元素添加清除浮动属性clear
html文件的代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<body>
<div class="div1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="clear">4</li>
<li>5</li>
<li>6</li>
<li class="clear">7</li>
<li>8</li>
<li>9</li>
<li class="clear">0</li>
</ul>
</div>
</body>
</html>
CSS中的代码如下:
li{
float: left;
list-style: none;
width: 50px;
height: 50px;
background: #ccc;
margin: 20px;
text-align: center;
line-height: 50px;
}
这时浏览器中的效果为:
如果我们想要4 7 0和其之后的子元素分别换行时,可以给4 7 0的li标签添加cclear:both;属性
.clear{
clear: both;
}
此时浏览器的效果:
总结:如果所有的子元素都设置了浮动,如果想要让其中某一个子元素和其后面的子元素全部换行时,就给那一个子元素添加clear属性
注:清除浮动不是不让他浮动,而是清除元素float浮动之后的不利影响