详解浮动元素引起的问题和解决办法

一、问题 多个浮动的元素无法撑开父元素的宽度,父元素的高度可能会变成0。 若浮动元素后面跟非浮动元素,非浮动元素会紧随其后浮动起来。 若浮动元素前面还有同级元素没有浮动则会影响页面结构。 二、解决办法 1.clear:both 在最后一个浮动元素后面添加属性为clear:both;的元素。 <style> div.parent>div.fl{ float: left; width: 200px; height: 200px; margin-right: 20px; border: 1px solid red; }