电话
13363039260
CSS定位机制中的浮动种类
2024-01-18 14:57 小编
CSS 有三种基本的定位机制：相对定位、浮动和绝对定位。接下来讲解一下浮动的定位代码。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
1.当都不设置浮动时：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
#main {
border: 1px solid #000;
padding:10px;
}
.box {
width: 200px;
height:100px;
border: 1px solid #F00;
margin:10px 0 0 30px;
}
</style>
</head>
<body>
<div id="main">
<div>box1</div>
<div>box2</div>
<div>box3</div>
</div>
</body></html>
css——定位
2.当设置box1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了box1 2，使box12 从视图中消失。
<!DOCTYPE html><html>
<head><meta charset="utf-8">
<title>不设置浮动</title>
<style type="text/css">
#main {
border: 1px solid #000;
padding:10px;
} .box {
width: 200px;
height:100px;
border: 1px solid #F00;
margin:10px 0 0 30px;
}
.box1 {
float:left;
}
</style>
</head>
<body>
<div id="main">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
</div>
</body></html>
css——定位
3.当都设置为浮动时，box1 向左浮动直到碰到包含框，另外两个box向左浮动直到碰到前一个浮动框。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>不设置浮动</title>
<style type="text/css">
#main {
border: 1px solid #000;
padding:10px;
overflow: hidden;
}
.box {
width: 200px;
height:100px;
border: 1px solid #F00;
margin:10px 0 0 30px;
float: left;
}
</style>
</head>
<body>
<div id="main">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
</div>
</body></html>
css——定位
4.清除浮动，要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
猜你喜欢
联络方式：
13363039260
微信二维码 