谈谈CSS的浮动问题详解编程语言
2023-06-13 09:20:39 时间
浮动的工作原理
浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框则停留。
浮动元素可能引起的问题
1.父元素的高度无法被撑开,影响与父级元素同级的元素
2.与浮动元素同级的非浮动元素会跟随其后
3.若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面的显示结构
清除浮动有什么解决办法?
一般来说有三种办法。
1.使用空标签清除浮动
在所有浮动标签后面添加一个空标签并定义CSS属性 clear:both
对比图:div未被撑开
加个空标签就可以,弊端是增加了无语义标签
style type="text/css" html,body,div{ margin: 0;padding: 0;} .box{border: 1px solid #333;} p{border: 1px dotted #333;} .box img{float: left;} .box p{float: left;} .cb{clear: both;} /style /head body div img src="1.jpg" width="50px" height="50px" p one /p !--在这里增加 div /div -- /div /body
当然了,如果浮动元素的后边元素你不需要浮动,可以顺便给它加个clear:both ,这样也不错。
2.使用overflow
给包含浮动元素的父元素标签添加CSS属性,overflow:hidden or auto; zoom:1 ,其中zoom:1用于兼容IE6,目的是为了触发hasLayout
3.使用after伪对象清除浮动。
但该方法只适用于非IE浏览器,还要注意的是使用的时候要记得为需要清除浮动元素的伪对象设置height:0; 否则该对象会比实际高出若干像素。
head
style
html,body,div{ margin: 0;padding: 0;} .box{border: 1px solid #333;} p{border: 1px dotted #333;} .box img{float: left;} .box p{float: left;} .cb{clear: both;} .clearfix{display: inline-block; /*zoom:1;*/ } /* for IE ; or use zoom:1 to trigger the hasLayout; */ .clearfix:after{content: "."; display: block; height: 0; visibility: hidden;clear: both;} /style /head body div img src="1.jpg" width="50px" height="50px" p one /p /div /body
4.就是给浮动元素的父元素也浮动起来,但这整体又浮动了所以不推荐~
5.还有一种就是直接给浮动的元素添加属性 display:table;
FF Chrome等支持,IE6/IE7测试显示不支持~ 所以还得触发hasLayout ,加上zoom:1 或者 display:inline-block 吧
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/13187.html
cjava相关文章
- axure菜单展开收起_css菜单栏的隐藏和显示
- html 中 超链接的写法,网页超链接样式的CSS写法「建议收藏」
- js / css 设置div不可点击
- Fontawesome中文版webfont,是一款基于css框架的网页字体图标库,它完全免费 Font Awesome字体为您提供可缩放矢量图标
- CSS 换行_css不允许换行
- scss,less,stylus这些css处理器该怎么选择
- 解决css引用字体跨域问题
- 纯CSS写的下拉菜单详解编程语言
- CSS学习摘要-语法和选择器详解编程语言
- CSS设计彻底研究详解编程语言
- css动画与js动画的区别详解编程语言
- springMVC3学习(四)–访问静态文件如js,jpg,css详解编程语言
- CSS中的Position定位问题详解编程语言
- CSS学习笔记03 CSS层叠性、继承性、特殊性详解编程语言
- CSS权威指南-第三版–读书笔记详解编程语言
- CSS浏览器兼容性—-Hack详解编程语言
- CSS 分页实例详解编程语言
- CSS 图片详解编程语言
- 使用 CSS 去掉 iPhone 网页上按钮的超大圆角默认样式详解编程语言
- CSS 属性设置优先级问题详解编程语言
- css动画 文字闪烁效果详解编程语言
- css滚动条占空间的解决方法详解编程语言
- CSS实现简单的图片防盗链代码
- 用CSS构建iframe效果
- 用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程!
- css实现行间距效果
- css样式之区分input是按钮还是文本框的方法
- jQuery帮助之CSS尺寸(五)outerHeight、outerWidth