关于float的自动换行问题
2017-07-13 15:30
155 查看
首先设置的几个float属性遇到超过父容器的情况下会自动换行
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> <style> .box { width: 100px; height: 700px; margin: 0 auto; border: 1px solid red; } .s-left{ width: 60px; height: 100px; background-color: #FF0000; float: left; } .s-right { width: 60px; height: 100px; background-color: yellow; float: right; } </style> </head> <body> <div class="box"> <div class="s-left"></div> <div class="s-right"></div> </div> </body> </html>
其次如果float属性遇到了没有定义float属性的块元素会自动换行
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> <style> .box { width: 700px; height: 700px; margin: 0 auto; border: 1px solid red; } .s-left{ width: 100px; height: 100px; background-color: #FF0000; float: left; } .s-center{ width: 100px; height: 100px; background-color: pink; } .s-right { width: 100px; height: 100px; background-color: yellow; float: right; } </style> </head> <body> <div class="box"> <div class="s-left"></div> <div class="s-center"></div> <div class="s-right"></div> </div> </body> </html>
最后补充几点使用float属性优先级大于margin属性,使用了float属性后margin属性定义可能会没有效果,float属性对后面的属性模块会产生影响,将后面如果消除后面的影响可以采用clear:both属性即不允许有浮动对象
相关文章推荐
- 自定义viewgroup实现自动换行的布局,同时解决自定义布局在wrapcontent下高度不能自适应的问题,plus一些关于Component重写的基础知识
- 关于inline-block,间隙距离去除,以及div自动换行,高度等问题的一个demo
- 关于easyui datagrid 单元格自动换行输出的问题
- Echarts 关于axisLabel中x抽值太长不自动换行的问题
- 关于处理Excel表中文字不能自动换行问题
- 关于自动换行问题。
- 因元素高度不统一造成 float 自动换行错位的问题
- 关于FireFox和IE的自动换行问题
- 关于ul下<li></li>内插入<span>内容</span>标签自动换行不在同一行问题
- 关于edit控件自动换行算法,计算量的问题
- 关于自动发送邮件换行等问题解决
- 关于文字自动换行的问题
- 解决ie6下兼容float 换行问题,解决ie6下padding的时候 宽度不自动扩展问题
- 关于python写入文件自动换行的问题
- 关于QReport自动换行的问题。
- 关于Lable自动换行的问题
- 关于Infragistics UltraWebGrid 单元格自动换行的问题
- css禁止float浮动元素自动换行/定位问题
- url 关于自动换行问题
- 关于使用bootstrapValidator的自动提交表单问题