浮动

 

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动其父元素中指定位置的过程

语法格式

Float:属性值(left right  none)

Display:inline-block 将块元素转换为行内块元素,可以放在一行上,有宽度和高度,但是这种布局方式,每个盒子直接有空隙,几乎是不可能去掉的。

浮动特性

浮动脱离标准流,不占位置,浮动元素总是找离它最近的父元素对齐,但不会超出内边距的范围

以下布局中,现有父元素,再添加浮动的子元素

 

浮动的元素排列位置,跟上一个元素有关系,如果上一个元素浮动,则A元素顶部会和上一个元素的顶部对齐,如果上一个元素是标准流,则A元素的顶部会和上一个元素的底部对齐,由此可见,一个父盒子里面的子盒子,其中一个子盒子有浮动,其他子盒子都需要浮动,这样才能一行对齐显示

 

元素添加浮动以后,元素会具有行内块元素的特性,元素的大小完全取决于定义的大小活着默认的内容多少

浮动根据元素书写的位置来显示相应的浮动

浮动的目的:为了让多个块级元素同一行显示

 

清除浮动的方法

a   在CSS中,clear属性用于清楚浮动,语法格式 选择器{clear:属性值}

     clear属性取值:left right  both ,一般使用both

b   额外标签法

                 是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签。例如

        <div style=”clear:both”></div>

                 优点:通俗易懂,书写方便

                 缺点:添加许多无意义的标签,结构化较差

 

c   父级添加overflow属性方法

        可以通过触发BFC的方式,可以实现清楚浮动的效果

        可以给父级添加:overflow:hidden|auto|scroll都可以实现

        优点:代码简洁

        缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素

d  使用after伪元素清除浮动

        :after方式为空元素的升级版,好处是不用单独添加标签

使用方法:

优点:符合 浮动思想,结构语义化正确

                 缺点:由于IE6 7不支持after,使用zoom:1触发haslayout

                 代表网站:百度 淘宝  网易等

e   使用before和after双伪元素清除浮动

 

 

优点:代码更简洁

                 缺点:由于IE 6 7不支持after,使用*zoom:1触发haslayout

                 代表网站:小米  腾讯等

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值