关于float的自动换行问题

来源：互联网发布：linux文件权限第三段编辑：程序博客网时间：2024/05/22 03:02

首先设置的几个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属性即不允许有浮动对象

阅读全文

1 0