右浮动位置问题

来源:互联网 发布:傲剑弓箭升级数据大全 编辑:程序博客网 时间:2024/05/17 07:20

想要实现的效果

5F7C8784-1244-4DFD-AB8D-36B3FBDF3799.png

出现的问题

6BD951F2-54ED-421E-894F-1D91D612629B.png

这里看代码

解决办法: 替换浮动元素与环绕元素的位置,将浮动元素前置

.container    .right-box    .content

原理: 浮动元素属于BFC,前置位没有环绕它的元素会占据行位

注意点: 除非content定宽否则不要给设float

0 0