实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>关于overflow:hidden清除浮动</title> </head> <body> <header style="height: 50px;background: cyan;">若父元素没固定高度而由子元素撑开，而子元素有浮动属性，那么通过在父元素中添加overflow:hidden可以达到清除浮动效果</header> <div class="container" style="/*! overflow: hidden; */clear: both;"> <div class="main" style="min-height: 600px;background: yellowgreen;width: 300px;float: left;/*! clear: both; */">若父元素添加固定高度，那么设置overflow:hidden后子元素超出范围的部分不会显示</div> </div> <footer style="height: 50px;background: coral;/*! clear: both; */"></footer> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例