分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

CSS 浮动规则

发布时间:2023-09-06 02:33责任编辑:胡小海关键词:CSS
  • 浮动元素会从文档正常流中删除,但它仍会影响布局
  • 浮动非替换元素必须为其指定width,否则元素的width会趋于0而导致浮动元素不能完整显示
  • 一旦元素具有了浮动属性,它便成为了一个块级元素。
  • 浮动元素的左右外边界不能超出包含块的左右内边界
  • 浮动元素永不会重叠
  • 浮动元素不会超过容器的上padding
  • 后浮动的元素永不会超过先浮动元素的顶端
  • 浮动元素会尽可能高地放置,便这个高受限于规则6和规则7
  • 浮动元素的下边界没有要求,因此当容器不足以容下浮动元素时,浮动元素会向下延伸。但部分浏览器会采取增大容器高度以容下浮动元素,而对于符合CSS2.1规范的浏览器要想让容器容下浮动元素的一个可行方法是:让容器也浮动
  • 浮动元素向下延伸时,不会影响正常文本的显示,文本会相对于浮动元素进行偏移。但部分文本背景会被浮动元素遮住
  • 如果浮动元素设置了负的外边距、这将破坏规则4、6、7
  • 当浮动元素的width>容器的width时,这会使得浮动元素超出容器的左右边界(超左超右依浮动方向而定) 
  • 浮动重叠规则:行内框(如strong)与浮动元素重叠时,其边框、背景、内容均位于浮动元素之上;块框与浮动元素重叠时,其边框、背景在浮动元素之下,而内容在浮动元素之上。
  • 对某个元素应用clear:left,意味着这个元素的左边不能有浮动元素。
  • clear不能用于非块级元素,比如<br/>,在大多数浏览器看来它是一个非块级元素,因此如果对br应用clear来清除浮动不会有任何效果,除非改变br的display:block。
  • 如果某元素应用clear清除浮动,则此元素设置的上外边距值会被忽略,但会有一个重新计算的上外边距值(甚至可能为0).如果希望此元素与浮动元素之间有一个明确的间隔,可以在浮动元素上设置下外边距。

CSS 浮动规则

原文地址:https://www.cnblogs.com/qianphong/p/10383658.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved