css中浮动需要注意的东西

1.css中的浮动:

在css中为了让元素移动到父元素的左边或者右边,我们可以对元素设置浮动float.

2.float:left/right

浮动的选择有两种,一种是float:left左浮动。还有一种是float:right右浮动

3.如果对一个元素设置了浮动,那么这个元素就会脱离标准文档流,并且该元素后面的元素会占据该元素原本的位置,并且元素后面的内容会被挤出。

4.加了浮动的元素是没有宽和高的,并且该元素的父元素的高度也会显示即高度塌陷,加了浮动的元素的宽和高是根据元素内部的内容动态需变化的。要对其父元素重新设置高度。

5.如果对某些元素设置了左浮动,那么这些元素会在同一排显示,但是如果这些元素的宽度和大于父元素,超出的部分(包括该元素)就会在下一行显示。

6.浮动的应用:

在网页布局的时候,一般一个网页的主体会分为几列,这时候我们可以使用浮动来实现。

内容包裹图片显示的时候,我们对图片设置浮动就可以,剩下的元素会占据图片原本的位置,但是内部的文本内容会在四周显示,即文本内容会被挤出。

在设置网站的横向导航的时候,,可以对列表元素设置浮动。

7.在实际应用的时候,我们需要对某些受到浮动影响的元素设置清除浮动,即不需要占据浮动元素原本的位置,我们可以通过设置clear:both/left/right.

8.clear:both  清除所有的浮动影响,不管是左浮动还是右浮动

   clear:left    清除左浮动的影响

   clear:right  清除右浮动的影响





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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值