php学习笔记之div+css(四)浮动

  • A+
所属分类:学习笔记

php学习笔记之div+css(四)浮动

php学习笔记之div+css(四)主要讲的是的浮动,在div+css 中浮动分为左浮动,右浮动,清除浮动等内容。在div+css中浮动还是非常简单的,但在实际的运用中浮动作用是非常重要的,特别在网站的布局上浮动至关重要,所以一定不能大意,打好基础才能走的更远!

浮动(float):指一个块元素向右/左移动,让出自己空间,向右/左移动直到碰到包含自己的父元素的最右/左边的边框。

基本语法:

float:none | left | right

默认值: none

取值:

none: 设置对象不浮动
left: 设置对象浮在左边
right: 设置对象浮在右边

如何清除浮动:

用clear清除css浮动效果,基本语法:

clear:none | left | right | both

默认值: none

取值:

none: 允许两边都可以有浮动对象
both: 不允许有浮动对象
left: 不允许左边有浮动对象
right: 不允许右边有浮动对象

注:清除float的方法很多这里我就写了一种,后面会再详细介绍如何清除浮动。


例子:

HTML代码:

<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>

CSS代码:

.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}
.div1{width: 80px;height: 80px;background: red;float: left;}
.div2{width: 80px;height: 80px;background: blue;float: left;}
.div3{width: 80px;height: 80px;background: sienna;float: left;}

用clear清除浮动:

现在CSS代码中加入clear代码,属性设置上如果想清除inzhuile所有浮动就是both,左就是left,右就是right。上面只有左浮动,所以代码如下:

.clear{clear:left; height: 0; line-height: 0; font-size: 0}

再在HTML代码中引用clear,代码:<div class="clear"></div>

这样就成功清除了浮动效果。


浮动总结:
你可以这么理解浮动:如果一个元素右/左浮动则:
①它本身会尽可能向右/左移动,直到碰到边框或者别的浮动元素,特别强调浮动对块元素和行内元素都生效!
②元素向右/左浮动,就相当于让出自己的左/右边,别的元素就会在它的左/右边排列.


醉墨阁个人博客网站版权所有,转载请注明文章出处。

原文地址:http://zuimoge.com/366.html

欢迎关注醉墨阁公众号:zmgblog

php学习笔记之div+css(四)浮动

  • 我的支付宝
  • 这是我的支付宝扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
小六

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: