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;width: 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;width: 150px;background: orange;box-sizing: border-box;padding: 10px;}
    nav li{list-style: none;}
    #wrapper{width:960px;border: 10px solid  royalblue;margin:  0 auto;}
    #article{background: #ffed53;float: left;width: 600px;padding: 10px;box-sizing:border-box}
    #article p{word-wrap: break-word;padding:10px ;}
    aside{width: 210px;float: left;background: darkgray;}
    aside div{padding:20px;margin: 10px;}
</style>