CSS定位机制中的浮动种类

CSS 有三种基本的定位机制：相对定位、浮动和绝对定位。接下来讲解一下浮动的定位代码。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

1.当都不设置浮动时：

浮动

#main {

border: 1px solid #000;

padding:10px;

}

.box {

width: 200px;

height:100px;

border: 1px solid #F00;

margin:10px 0 0 30px;

}

css——定位

2.当设置box1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了box1 2，使box12 从视图中消失。

不设置浮动

#main {

border: 1px solid #000;

padding:10px;

} .box {

width: 200px;

height:100px;

border: 1px solid #F00;

margin:10px 0 0 30px;

}

.box1 {

float:left;

}

css——定位

3.当都设置为浮动时，box1 向左浮动直到碰到包含框，另外两个box向左浮动直到碰到前一个浮动框。

不设置浮动

#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;

}

css——定位

4.清除浮动，要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！