overflow: hidden用法，清除浮动&隐藏溢出

ゝ一世哀愁。 2022-05-25 07:45 276阅读 0赞

**overflow:hidden是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。**

<table style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.1em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;min-height:auto;"> 
 <tbody style="margin:0px;padding:0px;background-image:none;float:none;height:auto;line-height:1.1em;vertical-align:baseline;width:auto;min-height:auto;"> 
  <tr style="margin:0px;padding:0px;background-image:none;border-top-width:0px;float:none;height:auto;line-height:1.1em;vertical-align:baseline;width:auto;min-height:auto;"> 
   <td style="border-collapse:collapse;margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.1em;vertical-align:baseline;width:35px;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;min-height:auto;color:rgb(175,175,175);"> 
    <div style="margin:0px;padding:0px .5em;background-image:none;background-color:rgb(244,244,244);border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      1 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      2 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;background-color:rgb(244,244,244);border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      3 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      4 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;background-color:rgb(244,244,244);border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      5 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      6 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;background-color:rgb(244,244,244);border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      7 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      8 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;background-color:rgb(244,244,244);border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      9 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      10 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;background-color:rgb(244,244,244);border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      11 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      12 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;background-color:rgb(244,244,244);border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      13 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      14 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;background-color:rgb(244,244,244);border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      15 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      16 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;background-color:rgb(244,244,244);border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      17 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      18 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;background-color:rgb(244,244,244);border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      19 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      20 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;background-color:rgb(244,244,244);border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      21 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      22 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;background-color:rgb(244,244,244);border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      23 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      24 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;background-color:rgb(244,244,244);border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      25 
    </div> 
    <div style="margin:0px;padding:0px .5em;background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;">
      26 
    </div></td> 
   <td style="border-collapse:collapse;margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.1em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;min-height:auto;"> 
    <div style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.1em;vertical-align:baseline;width:auto;min-height:auto;"> 
     <div style="margin:0px;padding:0px 1em;background-image:none;background-color:rgb(244,244,244);border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">&lt;!</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,255);">DOCTYPE</code>&nbsp; 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">html&gt;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">&lt;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,255);">html</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">&gt;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;background-color:rgb(244,244,244);border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">&lt;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,255);">head</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">&gt;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">&lt;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,255);">title</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">&gt;&lt;/</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,255);">title</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">&gt;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;background-color:rgb(244,244,244);border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">&lt;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,255);">style</code>&nbsp; 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">type="text/css"&gt;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">#div1{ </code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;background-color:rgb(244,244,244);border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">width: 200px;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">/*height: 50px;*/</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;background-color:rgb(244,244,244);border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">padding: 10px 20px 20px 10px;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">background: red;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;background-color:rgb(244,244,244);border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">margin: 0 auto;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">}</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;background-color:rgb(244,244,244);border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">#div2{ </code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">width: 100px;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;background-color:rgb(244,244,244);border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">height: 100px;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">background: green;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;background-color:rgb(244,244,244);border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">float: left;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">}</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;background-color:rgb(244,244,244);border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">&lt;/</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,255);">style</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">&gt;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">&lt;/</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,255);">head</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">&gt;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;background-color:rgb(244,244,244);border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">&lt;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,255);">body</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">&gt;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">&lt;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,255);">div</code>&nbsp; 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">id="div1" &gt;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;background-color:rgb(244,244,244);border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">&lt;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,255);">div</code>&nbsp; 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">id="div2" &gt;&lt;/</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,255);">div</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">&gt;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">&lt;/</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,255);">div</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">&gt;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;background-color:rgb(244,244,244);border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">&lt;/</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,255);">body</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">&gt;</code> 
     </div> 
     <div style="margin:0px;padding:0px 1em;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;"> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">&lt;/</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,255);">html</code> 
      <code style="margin:0px;padding:0px;background-image:none;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;white-space:nowrap;color:rgb(0,0,0);">&gt;</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

![771708-20160923114438902-1317694917.png][]

**当父div没有规定height值，子div浮动后，父div只剩下padding-top+padding-bottom的30px.**

**如何让子div再次将父div的高度撑开呢？固然将父div也浮动起来是比较常用的做法，其实还可以使用overflower:hidden来清除浮动带来的影响。**

效果如下:

![771708-20160923115046949-1163604987.png][]

**当然，我们以前用的最多的还是使用overflow:hidden来隐藏子元素相对于父元素的超界溢出，如下所示。**

**给父div加上固定高度后，再使用overflow: hidden将会隐藏掉子元素超出的那一部分，如下图：**

![771708-20160923115519090-725576322.png][]

**，因此我们可以尝试这样总结：当父元素的高度是靠子元素撑开的时候，子元素浮动时，则在父元素使用overflow: hidden可以清除浮动，使得父元素的高度依旧是靠子元素撑开。**

**当父元素自身设置了height属性值，则在父元素使用overflow: hidden可以使子元素超出父元素的那部分隐藏。**

原文地址：https://www.cnblogs.com/Likebard/p/5899512.html

[771708-20160923114438902-1317694917.png]: /images/20220525/be07b1c66b544cc48670fcd58d5ef14f.png
[771708-20160923115046949-1163604987.png]: /images/20220525/a59e6e8fd15e4bc784555de05d2b8924.png
[771708-20160923115519090-725576322.png]: /images/20220525/11161dc47dca4922af0130c25d489b11.png