zoukankan      html  css  js  c++  java
  • 元素float以后,div高度无法自适应解决方案

    首先要明白 >>  浮动的子元素会脱离文档流,不再占据父元素的空间,父元素也就没有了高度。

    解决方案:1
      给父元素加上overflow:hidden;属性就行了。

    第一种:(给父级加overflow:hidden;)
    
    <style type="text/css">
       .parent{width:100px; border:1px solid #ccc; overflow:hidden;}
       .parent li {list-style:none;float:left;width:20px;} 
    </style>
    
    
    <div class="parent">
        <ul>
            <li> <a href="#">全部手机</a></li>
            <li> <a href="#">1080高清</a></li>
            <li> <a href="#">双卡手机</a></li>
             <li> <a href="#">拍照神器</a></li>
        </ul>
    </div>
    解决方案:2
      给浮动元素后加上clear:both;属性就行了。

     1 //第二种:(给浮动元素后加clear:both)
     2 
     3 <style type="text/css">
     4    .parent{width:100px; border:1px solid #ccc; }
     5    .parent li {list-style:none;float:left;width:20px;} 
     6 </style>
     7 
     8 
     9 <div class="parent">
    10     <ul>
    11         <li> <a href="#">全部手机</a></li>
    12         <li> <a href="#">1080高清</a></li>
    13         <li> <a href="#">双卡手机</a></li>
    14          <li> <a href="#">拍照神器</a></li>
    15     </ul>
    16     <div style="clear:both"></div>
    17 </div>


  • 相关阅读:
    getfacl语法2
    getfacl
    setfacl语法2
    setfacl语法
    特殊权限语法2
    特殊权限语法
    vim语法
    locate语法
    find语法
    dos语法
  • 原文地址:https://www.cnblogs.com/lc23/p/5434032.html
Copyright © 2011-2022 走看看