问题
在写代码的时候浏览器会将换行代码之间多个空格解释为一个空格，但是这一个空格有时会破坏整个页面布局
比如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
border:1px solid red;
}
#float_id{
border:1px solid red;
}
.span{
border:1px solid red;
}
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<br />
<div id="float_id">
<span class="span">float样式属性</span><span class="span">float样式属性</span>
</div>
</body>
</html>
- 如果在两个标签之间有空格或者换行则浏览器会自动解释成一个空格，影响页面布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
border:1px solid red;
}
#float_id{
border:1px solid red;
}
.span{
/*未设置浮动*/
border:1px solid red;
}
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<br />
<div id="float_id">
<span class="span">float样式属性</span>
<span class="span">float样式属性</span>
</div>
</body>
</html>
上面多出来一个空格，对页面的布局有影响
解决方法：使用float样式属性
- 所以这里可以使用float样式属性来解决这个问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
border:1px solid red;
}
#float_id{
border:1px solid red;
}
.span{
border:1px solid red;
/*设置浮动*/
float: left;
}
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<br />
<div id="float_id">
<span class="span">float样式属性</span>
<span class="span">float样式属性</span>
</div>
</body>
</html>
- 可以看到这里添加float属性之后空格没有了，但是因为两个span标签浮动了所以div标签变成了一条线
- 可以使用伪类after或者在div标签内添加取消浮动的代码
取消浮动的两种方法
1. 在div内添加取消浮动的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
border:1px solid red;
}
#float_id{
border:1px solid red;
}
.span{
border:1px solid red;
/*设置浮动*/
float: left;
}
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<br />
<div id="float_id">
<span class="span">float样式属性</span>
<span class="span">float样式属性</span>
<!--取消浮动-->
<div style="clear: left;"></div>
</div>
</body>
</html>
2. 使用伪类after
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
border:1px solid red;
}
#float_id{
border:1px solid red;
}
/*使用伪类after取消浮动*/
#float_id:after{
clear: left;
content:"";
display: block;
}
.span{
border:1px solid red;
/*设置浮动*/
float: left;
}
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<br />
<div id="float_id">
<span class="span">float样式属性</span>
<span class="span">float样式属性</span>
</div>
</body>
</html>
- 这里中间空格没有了，而且取消了浮动