网页布局中经常会用到 float 浮动, 但是浮动的块级元素脱离了标准文档流, 使得浮动元素的父元素没有高度, 导致父级元素没有高度, 所以需要清除浮动对父级元素的影响, 本文介绍清除浮动的几种方法.
清除浮动影响的几种方法:
给父级元素设置高度
效果图:
代码:
- <style>
- * {
- padding: 0;
- margin: 0;
- }
- .header {
- height: 30px;
- line-height: 30px;
- background-color: #333;
- }
- .header a {
- color: #fff;
- text-decoration: none;
- }
- ul {
- float: right;
- }
- li {
- float: left;
- list-style: none;
- padding-right: 20px;
- }
- </style>
- <div class="header">
- <ul>
- <li><a href="#"> 首页 </a></li>
- <li><a href="#"> 文章 </a></li>
- <li><a href="#"> 问答 </a></li>
- <li><a href="#"> 帮助 </a></li>
- <li><a href="#"> 关于 </a></li>
- </ul>
- </div>
外墙法: 使用一个空白块级元素上添加 CSS 样式 clear 清除浮动
注意: 添加了 clear 样式的块级元素添加不了 margin 外边距属性
效果图:
代码:
- <style>
- * {
- padding: 0;
- margin: 0;
- }
- .header {
- /* background-color: #333; */
- }
- .header a {
- /* color: #fff; */
- text-decoration: none;
- }
- ul {
- float: right;
- }
- li {
- float: left;
- list-style: none;
- padding: 5px 20px;
- }
- .clearfix {
- height: 10px;
- background-color: red;
- clear: both;
- }
- .main {
- color: #fff;
- height: 100px;
- background-color: blue;
- }
- </style>
- <div class="header">
- <ul>
- <li><a href="#"> 首页 </a></li>
- <li><a href="#"> 文章 </a></li>
- <li><a href="#"> 问答 </a></li>
- <li><a href="#"> 帮助 </a></li>
- <li><a href="#"> 关于 </a></li>
- </ul>
- </div>
- <div class="clearfix"></div>
- <div class="main"> 主要内容 </div>
内墙法: 使用一个空白块级元素上添加 CSS 样式 clear 清除浮动
效果图:
代码:
- <style>
- * {
- padding: 0;
- margin: 0;
- }
- .header {
- background-color: #333;
- }
- .header a {
- color: #fff;
- text-decoration: none;
- }
- ul {
- float: right;
- }
- li {
- float: left;
- list-style: none;
- padding: 5px 20px;
- }
- .clearfix {
- clear: both;
- }
- </style>
- <div class="header">
- <ul>
- <li><a href="#"> 首页 </a></li>
- <li><a href="#"> 文章 </a></li>
- <li><a href="#"> 问答 </a></li>
- <li><a href="#"> 帮助 </a></li>
- <li><a href="#"> 关于 </a></li>
- </ul>
- <div class="clearfix"></div>
- </div>
内墙法 相对于外墙法有相对优点:
内墙法设置后, 浮动元素的父级元素会被撑开, 也就是说有了高度
给浮动元素的父元素添加 overflow:hidden
原意: 表示移除隐藏, 溢出边框的内容都要隐藏掉
效果图:
代码:
- <style>
- * {
- padding: 0;
- margin: 0;
- }
- .header {
- background-color: #333;
- overflow: hidden;
- }
- .header a {
- color: #fff;
- text-decoration: none;
- }
- ul {
- float: right;
- }
- li {
- float: left;
- list-style: none;
- padding: 5px 20px;
- }
- .main {
- color: #fff;
- height: 100px;
- background-color: blue;
- }
- </style>
- <div class="header">
- <ul>
- <li><a href="#"> 首页 </a></li>
- <li><a href="#"> 文章 </a></li>
- <li><a href="#"> 问答 </a></li>
- <li><a href="#"> 帮助 </a></li>
- <li><a href="#"> 关于 </a></li>
- </ul>
- </div>
- <div class="main"> 主要内容 </div>
来源: http://www.jianshu.com/p/19bc43fad920