文章目录

浮动


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style> .box{
      border: 1px solid #000; } .swim{
      width: 100px; height: 100px; background-color: aqua; float: right; } </style>
</head>
<body>
    <div class="box">一天到晚都在摸鱼
        <div class="swim">竟是我自己</div>
    </div>
</body>
</html>

清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
    <style> .box{
      border: 1px solid #000; width: 500px; } .left{
      width: 200px; height: 200px; background-color: aqua; float: left; } .right{
      width: 200px; height: 200px; background-color: brown; float: right; } .clear{
      clear: both; } </style>
</head>
<body>
    <div class="box">
        <div class="left">我是left</div>
        <div class="right">我是right</div>
        <div class="clear"></div>
    </div>
</body>
</html>

常用技巧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
    <style> .box{
      border: 1px solid #000; width: 500px; } .left{
      width: 200px; height: 200px; background-color: aqua; float: left; } .right{
      width: 200px; height: 200px; background-color: brown; float: right; } .clearfix:after{
      content:""; clear: both; display: block; height: 0px; font-size: 0px; visibility: hidden; } </style>
</head>
<body>
    <div class="box clearfix">
        <div class="left">我是left</div>
        <div class="right">我是right</div>
        <div class="clear"></div>
    </div>
</body>
</html>

实战案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双飞翼布局</title>
    <style> .container{
      border: 1px solid #000; width: 800px; margin: 0px auto; overflow: hidden; } .center{
      float: left; background-color: red; width: 100%; } .left{
      float: left; background-color: blue; width: 200px; margin-left: -100%; } .right{
      float: left; background-color: pink; width: 200px; margin-left: -200px; } .content{
      margin: 0px 200px; } </style>
</head>
<body>
    <div class="container">
        <div class="center">
            <div class="content">前端</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>