css标准流和浮动

标准流

块级元素占据一行显示,行内元素在一行显示   ->元素按照原来的显示方式显示称为标准流

浮动的作用和用法

float    设置元素是否浮动或者如何浮动


         none    不浮动

        left          左浮动

        right       右浮动

浮动的特点

1:浮动的元素不占据原来在标准流中的位置      (脱离标准流)

2:浮动可以让块级元素在一行上显示,让行内元素可以设置有效宽高   (本质上实现了模式的转换)

3:浮动的元素顶端对齐

清除浮动

浮动带来的影响:
       所有的子盒子都浮动之后,导致父盒子对的高度为0,父盒子后面的盒子占据了父盒子原来的位置,子盒子漂浮到了父盒子后面的盒子上了




这个时候就需要清除浮动带来的影响了

清除浮动的方法

1:给父盒子设置高度

2:给父盒子设置overflow:hidden;

3:给父盒子的最后一添加一个盒子,这个盒子有个属性:clear:both;

4:使用伪元素清除浮动  (clearfix:after)


清除浮动的原理:
1:
给父盒子设置高度,直接把塌陷的高度补充回来
2:
overflow:hidden;触发了css里的BFC原理 BFC=block  formatting context块级格式化上下文    (简单理解:设置overflow:hidden元素,里面的子元素就自成一个体系,不会受到外部的影响)
3:
clear:both隔断两边的浮动流

伪元素
:before为某个盒子添加子元素,这个子元素永远成为第一个子元素
:after 为某个盒子添加一个子元素,这个子元素永远成为最后一个子元素

 

转载于:https://www.cnblogs.com/woshidameinv/p/5826650.html

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值