左浮动和右浮动

来源：互联网发布：淘宝开通网商银行账户编辑：程序博客网时间：2024/04/30 00:57

在div+css中浮动分为左浮动，右浮动，清除浮动

① 右浮动

所谓右浮动，指一个块元素向右移动，让出自己空间，向右移动直到碰到包含自己的父元素的最右边的边框.

② 左浮动

所谓左浮动，指一个块元素向左移动，让出自己空间，向右移动直到碰到包含自己的父元素的最左边的边框.

快速入门 :

理论完了以后直接开门见山来段代码：

float.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta charset="UTF-8"/><title>盒子模型2</title><link rel="stylesheet" type="text/css" href="div.css"></head><body><div class="div4">    <div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div></div></body></html>

div.css

.div1{width: 150px;height: 150px;border: 1px solid blue;background: pink;}.div2{width: 400px;height: 400px;border: 1px solid blue;}/* id选择器 */#special{float: right; /* 右浮动 */}

从这个案例我们可以看出，所谓左浮动就是指: 某个块元素尽量向左边移动，这样就让出它右面的空间，让别的块元素显示.

浮动的特别说明:

如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮

动元素“卡住”：直到有足够空间.

☞ 如果使用浮动属性：则该元素不管是不是块元素，都会按照 display: block来显示.

小总结:

你可以这么理解浮动:如果一个元素右/左浮动则:

①它本身会尽可能向右/左移动，直到碰到边框或者

别的浮动元素,特别强调浮动对块元素和行内元素都

生效!

②元素向右/左浮动，就相当于让出自己的左/右边,别

的元素就会在它的左/右边排列。

1 1