Css3的浮动(极小章)

本文介绍了CSS3中的浮动属性`float`,用于块元素的排列,以及如何处理浮动带来的父级塌陷问题,包括使用`clear`、设置固定高度、`overflow`等方法。此外,还提到了一个利用无序列表和浮动实现照片墙的需求,要求相框在页面中水平居中,各照片左浮动。虽然内容简短,但涵盖了CSS布局的基础知识点。
摘要由CSDN通过智能技术生成


在块元素的排列上浮动很好用

float:left /right /none
加了浮动之后,原本围绕图片的文字现在好像跑到一边了,不再包裹图片且图片超出父元素显示,脱离正常的文档流,它把div盖住,是无法成为内容把div撑起来的

clear:left/right/both(左右不允许出现浮动/ none
清除浮动带来的父级塌陷问题
1在浮动元素后面加上空div设置style=clear:both  ps但是空div会造成冗余
2给父元素设置高度:ps但是会降低扩展性
3给父元素设置overflow:hidden  ps但是下拉列表框不能用
4父级加伪类::after{content:""
        display:block
        clear:both}
伪类是空的但是个块元素

溢出处理
overflow:visible内容不会修改会出现在盒子外 hidden 内容会被修剪,并且其余内容不可视,scroll内容会被修剪,浏览器会配置滚动条查看其余内容(横向和纵向都有)auto 如果内容被修改,浏览器会配置滚动条(比上个更加智能一点)

-----------------------------------------------------------------------------------------------------------

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值