HTML+CSS学习之浮动

来源：互联网发布：定金和尾款淘宝客编辑：程序博客网时间：2024/05/20 03:41

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

① 右浮动

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

② 左浮动

快速入门 :

1 分钟前上传

下载附件 (8.33KB)

.div1{

width:150px;

height:100px;

border:1px solid blue;

background: pink;

margin-top:5px;

float:left;/*左浮动*/

}

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

浮动的特别说明:

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

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

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

小总结:

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

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

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

生效!

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

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

再一个案例:

1 分钟前上传

下载附件 (51.2KB)

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<body>

<img style="float:left;margin-right:5px;"src="2.jpg"/>爱克发kadlkaflksaflkas;lfkaslfksa;lfksafkas;lf爱克发

</body>

</html>

0 0