zoukankan      html  css  js  c++  java
  • 清除浮动的影响

    前言:网上有很多很好的例子,我这里只是记下自己的理解和感悟

    先看下浮动:

    代码:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>第一种</title>
     6     <style>
     7         #box {
     8             border: solid;
     9         }
    10 
    11         .con {
    12             float: left;
    13             width: 100px;
    14             height: 100px;
    15         }
    16 
    17         .con1 {
    18             background: red;
    19         }
    20 
    21         .con2 {
    22             background: green;
    23         }
    24 
    25         .con3 {
    26             background: blue;
    27         }
    28     </style>
    29 </head>
    30 <body>
    31 <div id="box">
    32     <div class="con con1"></div>
    33     <div class="con con2"></div>
    34     <div class="con con3"></div>
    35 </div>
    36 </body>
    37 </html>

    效果:

    如图,子元素跑到父级元素外面去了(大逆不道 !)

    下面我就替天行道,

    劝说:(不常用)

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>第一种</title>
     6     <style>
     7         #box {
     8             border: solid;
     9         }
    10 
    11         .con {
    12             float: left;
    13             width: 100px;
    14             height: 100px;
    15         }
    16 
    17         .con1 {
    18             background: red;
    19         }
    20 
    21         .con2 {
    22             background: green;
    23         }
    24 
    25         .con3 {
    26             background: blue;
    27         }
    28 
    29         .clear {
    30             clear: both;
    31         }
    32     </style>
    33 </head>
    34 <body>
    35 <div id="box">
    36     <div class="con con1"></div>
    37     <div class="con con2"></div>
    38     <div class="con con3"></div>
    39     <div class="clear"></div>
    40 </div>
    41 </body>
    42 </html>

    效果:

    告诉他们父亲:(难以实现下面图片的效果,头像溢出了,隐藏就没了╮(╯▽╰)╭)

    代码:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>第一种</title>
     6     <style>
     7         #box {
     8             border: solid;
     9             overflow: hidden;
    10         }
    11 
    12         .con {
    13             float: left;
    14             width: 100px;
    15             height: 100px;
    16         }
    17 
    18         .con1 {
    19             background: red;
    20         }
    21 
    22         .con2 {
    23             background: green;
    24         }
    25 
    26         .con3 {
    27             background: blue;
    28         }
    29 
    30     </style>
    31 </head>
    32 <body>
    33 <div id="box">
    34     <div class="con con1"></div>
    35     <div class="con con2"></div>
    36     <div class="con con3"></div>
    37 </div>
    38 </body>
    39 </html>

     直接硬扛:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>第一种</title>
     6     <style>
     7         #box {
     8             border: solid;
     9             zoom: 1;
    10             /*处理兼容*/
    11         }
    12 
    13         #box:after{
    14             clear: both;
    15             content: ".";
    16             display: block;
    17             width: 0;
    18             height: 0;
    19             visibility: hidden;
    20         }
    21 
    22         .con {
    23             float: left;
    24             width: 100px;
    25             height: 100px;
    26         }
    27 
    28         .con1 {
    29             background: red;
    30         }
    31 
    32         .con2 {
    33             background: green;
    34         }
    35 
    36         .con3 {
    37             background: blue;
    38         }
    39 
    40     </style>
    41 </head>
    42 <body>
    43 <div id="box">
    44     <div class="con con1"></div>
    45     <div class="con con2"></div>
    46     <div class="con con3"></div>
    47 </div>
    48 </body>
    49 </html>
  • 相关阅读:
    PAT (Advanced Level) 1060. Are They Equal (25)
    PAT (Advanced Level) 1059. Prime Factors (25)
    PAT (Advanced Level) 1058. A+B in Hogwarts (20)
    PAT (Advanced Level) 1057. Stack (30)
    PAT (Advanced Level) 1056. Mice and Rice (25)
    PAT (Advanced Level) 1055. The World's Richest (25)
    PAT (Advanced Level) 1054. The Dominant Color (20)
    PAT (Advanced Level) 1053. Path of Equal Weight (30)
    PAT (Advanced Level) 1052. Linked List Sorting (25)
    PAT (Advanced Level) 1051. Pop Sequence (25)
  • 原文地址:https://www.cnblogs.com/chenluomenggongzi/p/5919443.html
Copyright © 2011-2022 走看看