浮动前后元素显示
浮动float会脱离正常的文档流,但是还会占有正常文档流的文本空间.
(1)不浮动后加浮动.浮动元素是否浮动,样式看起来没什么区别,但是浮动元素会对后边元素产生影响.
(2)浮动后加浮动.浮动元素之间左右近邻.
(3)浮动后加不浮动.同样浮动元素会被未浮动的元素覆盖掉
关于(1)和(3)之间是有区别的.一般我们实现两列布局使用的是左右浮动.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float测试</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
}
#id1 {
background-color: #f0c;
float:left;
}
/*#id2 {
background-color: #fcc;
float: left;
}*/
#id3 {
background-color:#8bc34a;
float:right;
}
/*#id4 {
background-color: #c0f;
}*/
</style>
</head>
<body>
<!-- <div id="id3">3</div> -->
<div id="id1">1</div>
<!-- <div id="id2">2</div> -->
<div id="id3">3</div>
<!-- <div id="id4"></div> -->
</body>
</html>效果:
但是
也可以采用,先加载浮动的元素,实现前后元素在一行显示的效果.
如下,先加载id3的盒子,再加在id1的盒子,只让id3的盒子产生浮动,id1的盒子不浮动,就会有左右两列的效果.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float测试</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
}
#id1 {
background-color: #f0c;
/*float:left;*/
}
/*#id2 {
background-color: #fcc;
float: left;
}*/
#id3 {
background-color:#8bc34a;
float:right;
}
/*#id4 {
background-color: #c0f;
}*/
</style>
</head>
<body>
<div id="id3">3</div>
<div id="id1">1</div>
<!-- <div id="id2">2</div> -->
<!-- <div id="id4"></div> -->
</body>
</html>如下
210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
