以前接触过那么一点CSS,对于浮动还是非常不了解的,不过通过这次做订餐大师了解了加上别人的一些讲解与分享,知道了:
一、以前都是把图像浮动,如下,把图像浮动在右侧:
img{ float:right; }
二、其实我们也可以设置文字的浮动:
1、float的属性:
left---元素向左浮动;
right---元素向右浮动;
none---元素不浮动;
left---继承父元素的浮动属性;
如下:设置名字跟价格左浮动,餐厅和套餐右浮动;
<style> .txt1{ float: left; } .txt2{ float: right; } .txt3{ float: left; } </style> <div class="txt1">张三</div> <div class="txt2">¥11.50</div> <div class="txt3">7-11 半荤半素</div>
2、上述情况,出现了一个问题,餐厅是跟在名字后面的,那么要餐厅在下一行,就要用到clear啦:
<style> .txt3{ clear:both; } </style>
3、还有一种情况就是,当他txt1与txt3都向左浮动时,会出现覆盖的现象,这是就要用overflow属性去重了:
<style> .txt3{ overflow:hidden; //设置其内容不可见 } </style>
相关推荐
CSS浮动属性Float详解 什么是CSS Float?
DIV+CSS布局:CSS浮动float属性详解 不解释
CSS无难事-浮动floatright的应用和li的高度问题.pdf
- 浮动`float` - 浮动布局概念 - 清理浮动 - 定位`position` - 文档流概念 - 定位分类 - fixed 定位特点 - 绝对定位计算方式 - `flex`布局 - 如何实现居中对齐? - 理解语义化 - CSS3 动画 - 重绘和回流 ----...
CSS-纸效果-浮动
具体详细的阐述了css浮动如何解决和浮动产生的原因。
P510-FE-CSS-字体-图标-浮动位置-线框 资源 图标和svg(可读) 图标和SVG在线工具(使用) 漂浮 位置 https://developer.mozilla.org/zh-CN/docs/Web/CSS/position 家庭作业-您应该使用在上一堂课中学到的...
DIV+CSS布局:CSS浮动float属性详解[归纳].pdf
DIVCSS布局:CSS浮动float属性详解
float-label-css 浮动标签模式的CSS实现
CSS深入理解之float浮动视频教程.txt 前端必备技能,助你快速掌握
从零开始学前端 - 6. CSS浮动float详解 示例代码 : 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 CSDN 上传的资源会自动涨积分,如有需要留下邮箱
前端项目-float-label-css,对于任何不支持的浏览器,仅使用防弹CSS实现浮动标签模式并自动回退。
CSS浮动属性Float详解[收集].pdf
原文:http://www.macji.com/blog/article/to-achieve-cross-browser-css-float-center/to-achieve-cross-browser-css-float-center/ 我们都知道float:left和float:right,但是否想过float:center呢?居中浮动。。。...
- 浮动`float` - 浮动布局概念 - 清理浮动 - 定位`position` - 文档流概念 - 定位分类 - fixed 定位特点 - 绝对定位计算方式 - `flex`布局 - 如何实现居中对齐? - 理解语义化 - CSS3 动画 - 重绘和回流,变量...
一、什么是浮动? 浮动,顾名思义,就是漂浮的意思。指的是一个元素脱离文档流,悬浮在父元素之上的现象。 二、如何产生浮动? 给元素本身添加float属性 float值: left 元素向左浮动。 right 元素向右...
旅馆响应式网站,供移动使用浮动。 AR酒店=> HTML / CSS应用程序使用Float制作可响应的移动网站(媒体查询) 演示: :