首页
登录 | 注册

css-float浮动详细内幕

前言

  pc端的页面为了保持良好的兼容性,一般会使用css2部分就支持的浮动(float)和定位(postion)来布局。浮动行为怪异,但有迹可循。以下下是在css揭秘一书中总结的浮动内幕。

包含块:浮动元素的包含块就是它的父元素。

浮动的6个行为

  生成块级框

    浮动会让任何元素生成一个块级框。

    》这意味着行内元素浮动后也能设置宽高了。

  像气球一样飞起

    浮动元素会从正常流中删除,它会飞到指定方向后再向上靠,直到父元内容区域(padding以内)的顶端。

    》记住会浮动到父元素上padding以内。

  紧紧围绕

    紧邻的块级元素看不到它,但块中的文本元素会紧紧围绕浮动元素。

    》常用于实现文本包围图片的效果

  外边距拒绝重叠

    浮动元素之间,相邻的所有浮动元素的外边距都不会重叠。

    》正常流中块元素之间的外边距会重叠,两个块之间的距离最终会以外边距多的一方为标准。

  包含块高度塌陷

    浮动元素的高度默认不参与父元素高度计算。

    》常说的清除浮动主要就是为了让浮动元素参与父元素高度计算。

  包含块宽度不够就向下排列

    两个浮动元素宽度相加大于父元素时,后浮动的元素会排列在之前浮动的元素的下方。

    》这就是你使用浮动,让元素水平排列的时候最后一个元素总会掉下来的原因。

注意:元素浮动前务必显示的指定元素的宽度,不然会出现一些无法预计的灵异事件。


相关文章

  • 从css 3d说到空间坐标轴
    有一次我们说到掷骰子那个游戏,当时是用了一个steps属性+雪碧图来制作帧动画,这当然颇为不错,但其实一开始我想的不是这样的,我想的是用真的3d和动画去做,这个方案涉及到不少空间的知识,今天来给大伙好好说说,这css 3d到底怎么玩. 先上 ...
  • 学了很多乱七杂八的东西,但是依然停留在前端,在工作中一直和后端交流,但是不太了解数据库是怎么回事,为了加强学习,准备学习一些关于数据库相关的东西. 说起数据库可能会有很多很多,SQLServer.Oracle.Sybase等等等,还有就是要 ...
  • 补习系列(20)-大话 WebSocket 与 "尬聊"的实现
    目录 一.聊聊 WebSocket 二.Stomp 是个什么鬼 三.SpringBoot 整合 WebSocket A. 引入依赖 B. WebSocket 配置 C. 控制器 D. 前端实现 四.参考文档 一.聊聊 WebSocket 从 ...
  • 页面性能优化-原生JS实现图片懒加载
         在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再加载更多的图片.这种加载图片的 ...
  • 《k8s 源码分析》- Custom Controller 之 Informer
    Custom Controller 之 Informer 概述 架构概览 reflector - List & Watch API Server Reflector 对象 ListAndWatch watchHandler - ad ...
  • [翻译 EF Core in Action 2.2] 创建应用程序的数据库上下文
    Entity Framework Core in Action Entityframework Core in action是 Jon P smith 所著的关于Entityframework Core 书籍.原版地址. 是除了官方文档外另 ...

2019 cecdns.com webmaster#cecdns.com
12 q. 0.077 s.
京ICP备10005923号