首页 > 其他分享 >谈谈CSS浮动

谈谈CSS浮动

时间:2024-04-16 16:00:02浏览次数:28  
标签:浮动 盒子 clearfix 元素 谈谈 设置 CSS

浮动,主要用于图片,使其不占文档位置,可以围绕在文字周围。浮动如果设置在块级元素内,整个块内的元素在同一行;浮动如果设置在行内元素,可以设置行内元素的宽高。由于浮动在文档中不占位置,因此如果父级盒子没设置高度,设置浮动的子元素设置了高度的话,那么父盒子会被撑开,这样对父盒子以下的其他子盒子也会造成影响,因此子盒子需要清除浮动。清除浮动可以采取三种方式: ①.clearfix::after{content:"";display:table;clear:both}(这种方式兼容ie低版本) ②overflow:hidden(这种方式,超出部分会隐藏) ③.clearfix{zoom:1}(这种是设置新标签clearfix的方式,不建议使用,因为新增标签可能会对原来的渲染造成影响)

标签:浮动,盒子,clearfix,元素,谈谈,设置,CSS
From: https://www.cnblogs.com/Cara-Smith/p/18138368

相关文章

  • vue3中使用scss
    安装依赖npminstallsasssass-loader--save-dev局部使用<stylescopedlang="scss">...定义样式</style> 全局共享样式变量,在assets/style文件夹中定义mixin.scss文件,并设置一些样式;在其他文件使用定义的变量前需要引入样式文件表  在vite.config.ts文件中......
  • XPath和CSS选择器的进阶
    记录一下关于selenium下xpath的进阶技术XPath轴(axes)和CSS选择器的伪类(pseudo-classes)与伪元素(pseudo-elements)是高级定位技术,可以在复杂的HTML结构中帮助你更精确地定位元素。1.XPath轴(Axes)XPath轴提供了一种方式来选择与当前节点有特定关系的节点。以下是一些常用的XPath轴:......
  • Python Flask+Pandas读取excel显示到html网页: CSS控制表格样式
    前言全局说明CSS控制表格样式一、安装flask模块二、引用模块三、启动服务模块安装、引用模块、启动Web服务方法,参考下面链接文章:https://www.cnblogs.com/wutou/p/17963563修改内容后,要重启flask服务,修改才能生效四、CSS控制表格样式4.1.2文件名:index.pyfrom......
  • 在CSS中创建一个鼠标悬停时弹出菜单
    要在CSS中创建一个鼠标悬停时弹出菜单,你可以使用HTML和CSS来实现。以下是一个简单的例子:HTML:<divclass="dropdown"><buttonclass="dropbtn">点击我</button><divclass="dropdown-content"><ahref="#">链接1</a>......
  • Python Flask+Pandas读取excel显示到html网页:CSS控制表格样式
    前言全局说明一、安装flask模块二、引用模块三、启动服务模块安装、引用模块、启动Web服务方法,参考下面链接文章:https://www.cnblogs.com/wutou/p/17963563四、CSS控制表格样式4.1.2文件名:index.pyfromflaskimportFlaskapp=Flask(__name__)@app.route("/excel......
  • css 盒子模型
    1.分类标准盒子模型content-box怪异盒子模型border-box2.示例代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1......
  • 谈谈数据治理(什么是数据治理)
    谈谈数据治理(什么是数据治理)转载至https://zhuanlan.zhihu.com/p/651814557  数据治理是一个对企业数字化转型至关重要的一个环节,关乎着企业核心数据是否能被规范化管理、数据的价值是否能被充分发挥等等。说白了能给企业实现降本增效、业务精细化运营、重要决......
  • css 选择器 和浏览器渲染
    1、!important;2、Id选择器3、类选择器属性选择器伪类选择器4、元素选择器伪元素选择器(::before::after)(a,b,c)算法aid选择器个数这b 类选择器属性选择器伪类选择器和c 元素选择器伪元素选择器和CSS浏览器渲染:1、样式声明:所有自定义的样式和浏览器默认的样式,......
  • 1.Html、CSS
    HTMLdiv块状元素(独占一行)Span行H1-h6标题i斜体Strong加粗a超链接Img图片Video视频Textarea表单域(多行)Button按钮input输入框placeholder框内灰色提示字CSS上右下左margin外边距padding内边距word-wrap:break-word自动换行border边框solid实线、radius边框弧......
  • HTML&CSS基础(HTML5和CSS3新增内容)
    HTML5一、新增的语义化标签标签名语义单/双标签header整个页面,或者分区域的头部双footer整个页面,或者部分区域的底部双nav导航双article文章、帖子、杂志、新闻、博客、评论双section页面中的某段文字,或者文章中某段文字双aside侧边栏双......