CSS清除浮动的方法，通过项目解析总结

　　网页布局中经常会用到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>

　　<ul>

　　</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>

　　<ul>

　　</ul>

　　</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>

　　<ul>

　　</ul>

　　</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>

　　<ul>

　　</ul>

　　</div>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h62888.shtml