abstract：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>浮动demo</title> <!-- 1.例子中使用浮动,ad广告页面居右显示 2.内容区可以设置外边距,距离正好是浮动元素的宽度 3.但是我们可以发现当内容区比较少,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动demo</title>
<!-- 1.例子中使用浮动,ad广告页面居右显示
2.内容区可以设置外边距,距离正好是浮动元素的宽度
3.但是我们可以发现当内容区比较少,页脚会上移和浮动元素重叠,所以此时我们可以使用 清除浮动,这样页脚就不会和浮动元素重叠
4.CSS只允许将一个元素向左或向右移动.
-->
<style type="text/css">
html,body{
margin: 0;
padding: 0;
background-color: #FFC0CB;
height: 100%;
}
div{
height: 100%;
}
#first {
background-color: yellow;
height: 10%;
}
#content {
background-color: red;
margin: 10px 200px 0px 0px;
height: 80%;
}
#ad {
background-color: blue;
height: 600px;
width: 200px;
float: right;
}
#footer {
background-color: #FFC0CB;
clear: right;
/* 效果的话,可以注释 清除浮动 以及 添加浮动查看 */
}
</style>
</head>
<body>
<div style="background-color: #00FFFF;">
<!-- 页眉 -->
<div id="first">
我是页眉
</div>
<!-- 广告区 -->
<div id="ad">
我是广告,一直浮动在右边
</div>
<!-- 主内容 -->
<div id="content">
我是内容
</div>
<!-- 页脚 -->
<div id="footer">
我是页脚我是页脚我是页脚我是页脚我是页脚我是页脚
我是页脚我是页脚我是页脚我是页脚我是页脚我是页脚
</div>
</div>
</body>
</html>
Correcting teacher：天蓬老师Correction time：2019-04-17 13:53:14
Teacher's summary：浮动最早用来实现图文混排的, 现在主要用来布局, 当有其它选择的时候, 建议少用浮动, 因为浮动之后, 脱离了文档流