css 行框和清理
来源:互联网 发布:深圳知豆电动车租赁 编辑:程序博客网 时间:2024/05/21 00:00
float:实现元素的浮动;
行框和清理
浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。
要想阻止行框围绕浮动框,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。
为了实现这种效果,在被清理的元素的上外边距上添加足够的空间,使元素的顶边缘垂直下降到浮动框下面:
假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。编写代码:
.news { background-color: gray; border: solid 1px black; }.news img { float: left; }.news p { float: right; }<div class="news"><img src="news-pic.jpg" /><p>some text</p></div>
这种情况下,出现了一个问题。因为浮动元素脱离了文档流,所以包围图片和文本的 div 不占据空间。
不幸的是出现了一个新的问题,由于没有现有的元素可以应用清理,所以我们只能添加一个空元素并且清理它。
解决方案
.news { background-color: gray; border: solid 1px black; float: left; }.news img { float: left; }.news p { float: right; }<div class="news"><img src="news-pic.jpg" /><p>some text</p></div>
这样会得到我们希望的效果。不幸的是,下一个元素会受到这个浮动元素的影响。为了解决这个问题,有些人选择对布局中的所有东西进行浮动,然后使用适当的有意义的元素(常常是站点的页脚)对这些浮动进行清理。这有助于减少或消除不必要的标记。
0 0
- css 行框和清理
- 行框和清理
- 清理你的CSS
- clearfix css清理浮动
- css清理浮动
- 清理没有用到的css
- css代码格式化清理工具
- CSS技巧:清理无用的CSS样式
- CSS中关于浮动(float)和清理(clear)的使用总结
- 一个通用自动处理 js版本号和css 版本号、自动压缩 js,css、自动清理网页注释工具
- 初始化和清理
- 初始化和清理
- java--初始化和清理
- 【java】初始化和清理
- 初始化和清理
- chart5 初始化和清理
- 初始化和清理
- 初始化和清理
- iOS开发-自定义控件的方式及注意
- ffmpeg使用参数的中文说明
- SpringMVC给控制器添加自定义注解控制访问权限(未测试)
- 使用运行时机制向Category中添加属性
- HDU1754 I Hate It 线段树入门题复习
- css 行框和清理
- hdu5734 推公式 多校2.1
- String.format()补全长度字符串
- 处理数据量大的问题
- 关于链接mysql报MySQLSyntaxErrorException: Table ** doesn't exist的问题
- Flexible Box布局
- Android相关技术知识点
- SolrCloud 4.3.1+Tomcat 7安装配置实践
- 通过反射解析json,无需依赖三方