浮动元素: 想要浮动一个元素,必须为这个元素设置一个宽度
1.放在首位
2.浮动元素脱离了正常的文档流,相当于悬浮在文档上;注意,下面例子中主内容也就是id为first的div仍然是占据着浏览器窗口的整个宽度,不过我们为他指定了一个外边距与浮动右边的元素一样宽,这样会减少内容的宽度,结果就得到一个漂亮的两栏页面.
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动元素</title>
<!-- 浮动元素: 想要浮动一个元素,必须为这个元素设置一个宽度
1.放在首位
2.浮动元素脱离了正常的文档流,相当于悬浮在文档上;注意,下面例子中主内容也就是id为first的div
仍然是占据着浏览器窗口的整个宽度,不过我们为他指定了一个外边距
与浮动右边的元素一样宽,这样会减少内容的宽度,结果就得到一个漂亮的两栏页面.-->
<style type="text/css">
html,body{
margin: 0;
padding: 0;
}
#first{
height: 200px;
margin-right: 200px;
}
#second{
background-color: #00FFFF;
float: right;
width: 200px;
background-color: 200px;
}
#third{
background-color: pink;
height: 100px;
}
#four{
background-color: #FFFF00;
}
#footer{
clear: right;/
/* 清除浮动: 这里是右侧有浮动元素,就会把页脚下移,一直到它右边没有浮动内容为止;这样
不管浏览器多宽,页脚都是在边栏下面*/
}
</style>
</head>
<body>
<div>
<div id="second">
<p >我是p段落,来学习下浮动元素,我没有设置浮动
我是p段落,来学习下浮动元素,我没有设置浮动我是p段落,来学习下浮动元素,我没有设置浮动我是p段落,来学习下浮动元素,我没有设置浮动我是p段落,来学习下浮动元素,我没有设置浮动我是p段落,来学习下浮动元素,我没有设置浮动我是p段落,来学习下浮动元素,我没有设置浮动我是p段落,来学习下浮动元素,我没有设置浮动
我是p段落,来学习下浮动元素,我没有设置浮动我是p段落,来学习下浮动元素,我没有设置浮动我是p段落,来学习下浮动元素,我没有设置浮动
我是p段落,来学习下浮动元素,我没有设置浮动
</p>
</div>
<div id="first">
<p id="four">雨纷飞,旧故里草木深,我听闻你始终一个人,斑驳的城门,盘踞着老树根;城郊墓地上,缘分落地生根是我们;
每一次难过的时候,就独自看一看大海,总想起身边走在路上的朋友,有多少正在醒来;好男儿胸怀像大海,经历了人生百态,时间上的冷暖;
这笑容温暖纯真</p>
<p id="four">我是p段落,来学习下浮动元素,设置浮动为right</p>
<!-- <p id="four">我是p段落,来学习下浮动元素</p>
<p id="four">我是p段落,来学习下浮动元素,设置浮动为right</p> -->
</div>
<div id="footer">
我是页脚
</div>
</div>
</body>
</html>
1843
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
