zoukankan      html  css  js  c++  java
  • css浮动布局小技巧

    父元素如何围住浮动的子元素的三种办法:

    一、为父元素应用overflow:hidden。

      overflow真正用途是防止包含元素被大的内容撑开,设定了宽度之后,包含元素将超过容器的内容减掉;而它还有另外一个作用就是迫使父元素包含其浮动的子元素。

    二、同时浮动父元素。

    三、添加非浮动的元素并清除它。

      这里又有二种办法来清除元素:

    第一种方法是加个空的div容器,由于没有往其添加内容,所以不会引入多余空间,然后使用clear属性清除他,我们知道包含元素一定会包围非浮动的子元素,

      当我们添加一个div子元素,并且清除浮动时他是位于浮动元素的下方的,所以包含元素会肯定包含他。以及他前面的浮动元素。

    第二种方法是不需要的多余的元素。利用css3的伪元素。::after

    对包含元素采用这样的css规则就行:

    包含元素::after{
                    content: "";
                    display: block;
                 
                    clear: both;
                }

    上面的第三种方法的第二小种办法,还能应用于没有父元素容器的情况。

    图片对应的html代码。我们发现第三张图片,由于第二张右侧还有空间,所以他浮动到图片右侧。这不是我们想要的结果。

    <div>
             <img src="../../img/img/a.jpg" width="200px" height="100px" />
             <p>这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片
             </p>
             <img src="../../img/img/a.jpg" width="200px" height="100px" />
             <p>这是第二张图片这是第二张图片
                 这 
             </p>
             <img src="../../img/img/a.jpg" width="200px" height="100px" />
            <p>这是第三张图片这是第三张图片这是第三张图片这是第三张图片这是第三张图片这是第三张图片
            </p>
            </div>
            <style>
                div{border: 1px solid burlywood; 400px;}
                img {float: left;}
                
            </style>

    解决方案是为每个段落应用上面的三种方法的第二种即添加伪元素::after。这样不管文本大小多少,都能保持完好。(你也可以给图片跟段落加个包含容器,然后运用前面的三种办法)

    为每个段位应用这样的一条css规则后效果如下:

    .clearfix{content: "";clear: both;display:block}

      

      浮动元素传统用来做出文字环绕图片的效果,二是可以让原来上下堆叠的块级元素变成左右并列,从而实现分栏布局。

      浮动非图片元素时,必须给它设定宽度,因为图片本身有默认的宽度。这一点要注意了。

    基于上面的考虑,本人运用浮动,写了个三栏固定宽度布局。

    固定宽度一般为960px,它能够被16 12 10 8 6 5 4 3整除,很容易计算出等宽分栏的数量。

    代码如下:

    <div id="wrapper">
        
        <header>
            <img src="../../img/img/d.jpg" width="50px"/>
            <h1>A Fixed width layout</h1>
             
        </header>
        <nav>
            <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>
            
        </nav>
        
        <div id="article">
            <h1>demo</h1>
        <p> dddddddddddddddddddddfffffffff
            fafffffffffffffffffffffffffffff
            fafsddddddddddddfadasdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
        </p>
        
        <h1>demo1</h1>
        <p> dddddd</p>
        <h1>demo1</h1>
        <p> dddddd</p>
        <h1>demo1</h1>
        <p> dddddd</p>
        <h1>demo1</h1>
        <p> dddddd</p>
        </div>
        <aside>
            <div >
            <h3>demo00</h3>
            <p>dafafaf</p>
            <h3>demo00</h3>
            <p>dafafaf</p>
            <h3>demo00</h3>
            <p>dafafaf</p>
            <h3>demo00</h3>
            <p>dafafaf</p>
            <img src="../../img/img/d.jpg" />
            </div>
        </aside>
        <footer>this  is my web thanks watching</footer>
    </div>
    <style>
        header{background: #f00;}
         
        header img{float:left}
        header h1::after{content: "";clear: both;display: block;}
        footer{background: #FF0000;clear: both;font-size: 20px;text-align: center;}
        *{margin: 0;padding: 0;}
        nav{float: left; 150px;background: orange;box-sizing: border-box;padding: 10px;}
        nav li{list-style: none;}
        #wrapper{960px;border: 10px solid  royalblue;margin:  0 auto;}
        #article{background: #ffed53;float: left; 600px;padding: 10px;box-sizing:border-box}
        #article p{word-wrap: break-word;padding:10px ;}
        aside{ 210px;float: left;background: darkgray;}
        aside div{padding:20px;margin: 10px;}
    </style>

  • 相关阅读:
    二进制位运算
    Leetcode 373. Find K Pairs with Smallest Sums
    priority_queue的用法
    Leetcode 110. Balanced Binary Tree
    Leetcode 104. Maximum Depth of Binary Tree
    Leetcode 111. Minimum Depth of Binary Tree
    Leetcode 64. Minimum Path Sum
    Leetcode 63. Unique Paths II
    经典的递归练习
    案例:java中的基本排序
  • 原文地址:https://www.cnblogs.com/rain-null/p/6937341.html
Copyright © 2011-2022 走看看