欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

 

浮动定位:解决了多个块级元素能在一行内显示。

什么是浮动定位。可以用如下几个特点定义。

特点一:将元素排除在文档流之外,即元素脱离文档流,不受默认排列方式(从上到下或者从左往右)的控制

特点二:浮动起来的元素将不再占用页面的空间。(元素从浏览器上原地拔起,从上往下依旧能看到浮动元素),有可能会压住其他的元素。

特点三:元素会停靠在包含框(父层元素)的左边或左边,或者停靠在已经浮动的元素的左边或者右边

特点四:元素无论怎么浮动,最终还是在包含框之内。

特点五:块级浮动之后,宽度自适应不是100%

特点六:行内元素浮动后,除了具备以上特点,它将变成块级元素,行内元素设置浮动多数是为了改变宽和高。

浮动属性:

float:定义当前元素浮动

取值:

none(默认没浮动)

left(浮动方向左边)

right(浮动方向右边)

下面做一个小练习希望对web爱好者有一个小小的帮助。可以拿代码过去看效果哦!

<!DOCTYPE HTML>

<html>

<head>

<title>文字属性</title>

<meta charset="utf-8">

<style>

div{

width:200px;

height:200px;

}

#d1{

background-color:red;

float:right;

/*一共三个div块级元素上下排列,设置第一个div向右浮动,后面两个补上*/

}

#d2{

background-color:yellow;

}

#d3{

background-color:green;

}

</style>

</head>

<body>

<div id="d1"></div>

<div id="d2"></div>

<div id="d3"></div>

</body>

</html>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r36424.shtml