css样式之清除浮动

最新推荐文章于 2025-07-04 17:31:59 发布

原创最新推荐文章于 2025-07-04 17:31:59 发布 · 300 阅读

0 ·

CC 4.0 BY-SA版权

基础前端专栏收录该内容

13 篇文章

订阅专栏

css的定位机制：
普通流：浮动元素只能向左向右移动
浮动：浮动元素碰到包含框或者另一个浮动框会停止
绝对定位：浮动元素之后的元素将围绕它，之前不受浮动元素会脱离标准流
清除浮动的三种常用方法（一般用2， 3 ）：
1 在浮动元素后使用一个空元素
eg：

<style>
.div1{ clear:both}
</style>
<div class="div1> </div>

2 给浮动元素的容器添加overflow：hidden
3 使用css3中的伪元素：（比较流行）

<style>
  .clearfix :after{
        content: "";
        display: block;
        height: 0;
        visibility: hidden;
        clear:both
    }
    .clearfix { zoom:1}  触发haslay out 兼容 IE 6 等浏览器
</style>
<div class="clearfix">
    
</div>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mypractise</title>
<style>
*{ margin: 0;
   padding:0
}
    li{ list-style: none}
    a{text-decoration: none}
    .container{ width: 1200px; margin: 0 auto}
    .header{ width: 1200px; background-color: #f2f2f2 ; overflow: hidden;zoom: 1}
    .header .logo{ width: 100px; height: 80px; float: left}
    .header .nav{float: right; overflow: hidden; zoom: 1}
    .header .nav li{ float: left ; margin: 0 20px}
    .header .nav li a { padding: 0 20px; display: block ; height: 80px; line-height: 80px; font-family: "宋体" ;font-size:15px }
    .header .nav li a:hover{ color:white }
    .main{ width: 1200px ; overflow: hidden; zoom: 1}
    .main .left{ width: 900px ;height: 500px ;background-color: greenyellow;float: left}
    .main .right{width: 300px ;height: 500px ;background-color:yellow;float: left}
    .footer{ height: 200px ;width: 1200px;background-color: red }
</style>
</head>
<body>
<div class="container">
    <div class="header">
        <div class="logo">
            <a href="#">
                [外链图片转存失败(img-UaTV8kad-1562206674463)(https://mp.youkuaiyun.com/img/logo.png)]
            </a>
        </div>
        <div class="nav">
            <ul class="ul">
                <li><a href="#">首页</a></li>
                <li><a href="#">内容</a></li>
                <li><a href="#">详情</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
            </div>
        </div>
        <div class="main">
            <div class="left">
                left
            </div>
            <div class="right">
               right
            </div>
        </div>
        <div class="footer"> foot</div>
    </div>
</div>
</body>
</html>