本文深入解析div+css中的浮动布局，详细解释了左浮动和右浮动的概念及其工作原理，通过具体案例展示了如何利用浮动布局实现元素的灵活布局。文章还讨论了浮动布局的特殊说明，包括不同高度的浮动元素如何相互作用以及如何正确使用浮动属性。
在div+css中浮动分为 左浮动，右浮动，清除浮动
① 右浮动
所谓右浮动 ，指一个块元素向右移动，让出自己空间，向右移动直到碰到包含自己的父元素的最右边的边框.
② 左浮动
快速入门 :
1 分钟前 上传
.div1{
width:150px;
height:100px;
border:1px solid blue;
background: pink;
margin-top:5px;
float:left;/*左浮动*/
}
从这个案例我们可以看出，所谓左浮动就是指: 某个块元素尽量向左边移动，这样就让出它右面的空间，让别的块元素显示.
浮动的特别说明:
如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮
动元素“卡住”：直到有足够空间.
☞ 如果使用浮动属性 ：则该元素不管是不是块元素，都会按照 display: block来显示.
小总结:
你可以这么理解浮动:如果一个元素右/左浮动则:
①它本身会尽可能向右/左移动，直到碰到边框或者
别的浮动元素,特别强调浮动对块元素和行内元素都
生效!
②元素向右/左浮动，就相当于让出自己的左/右边,别
的元素就会在它的左/右边排列。
再一个案例:
1 分钟前 上传
<!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>
扫一扫
8597
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
