关于浮动的那些事

最近在学做网页,都快把我逼疯了,代码写的乱哄哄的,哎,自己都嫌弃。今天我又看了关于CSS中浮动的知识,那下面我就谈谈我现在对浮动的理解吧。
浮动(Float)是指设置了浮动属性的元素会脱离标准普通流的控制而移到指定的位置。也就是说,它能让元素向左向右移动,而一个浮动的元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动之后的元素会围绕在它的周围,浮动之前的元素不受影响。

浮动的属性有:
left(元素向左浮动)
right(元素向右浮动)
none(默认值,元素不浮动,并会显示在文本中出现的位置)
inherit(规定应该从父元素继承float属性的值)

浮动特性

1.浮动的元素脱离了文档流,但未摆脱文本流。意思是正常文档流中的块级元素会按照浮动元素不存在一样排列,但是文本并不会和浮动元素重叠。

2如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。如果宽度不够的话会出现自动换行。

3.当父元素未设置高度的时候,多个子元素的高度和会撑起父元素的高度;当设置浮动后,子元素最高的高度撑起了父元素的高度。

注:
1.浮动会导致高度塌陷,也就是说当子元素同时设置浮动后,父元素失去支撑,父元素的高度消失,缩成一条线。这时可用overflow:hidden解决。

2.浮动不能和绝对定位一起用,一旦混用,绝对定位会使浮动属性消失;而浮动可以和相对定位一起用,经常用于父元素通过浮动定位,而其子元素需要绝对定位,这个时候就需要将父元素设置为相对定位,这时相对定位并不会改变浮动属性。

3.浮动的清除可以通过.clearfix:after{clear:both}实现。

以上就是我对浮动的理解,更多的前端开发知识可以查阅HTML中文网。

  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值