• 清除浮动


    浮动元素引起的问题:

    当容器的高度为auto(没设置),容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局。

    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            .news {
            background-colorgray;
            bordersolid 1px black;
            }

            .news img {
            floatleft;
            }

            .news p {
            floatright;
            }
        </style>
    </head>
    <body>
        <div class="news">
            <img src="1.jpg"/>
            <p>some text</p>
        </div>
    </body>
    </html>

    解决方法一:额外标签法,<div style="clear:both;"></div>,<br style="clear:both;"/>,<hr style="clear:both;"/>

    优点:简单,代码少,浏览器兼容性好。

    缺点:需要添加大量无语义的html元素,代码不够优雅,后期不容易维护。

    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            .news {
            background-colorgray;
            bordersolid 1px black;
            }

            .news img {
            floatleft;
            }

            .news p {
            floatright;
            }
        </style>
    </head>
    <body>
        <div class="news">
            <img src="1.jpg"/>
            <p>some text</p>
            <div style="clear:both;"></div>
        </div>
    </body>
    </html>

    方法二用after伪元素(推荐)

    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            .news {
            background-colorgray;
            bordersolid 1px black;
            }

            .news::after/*添加了一个看不见的空格"020"或点"."*/
            content"020"/*content:".";*/
            displayblock;
            height0;
            clearboth;
            visibilityhidden;
            }

            .news img {
            floatleft;
            }

            .news p {
            floatright;
            }
        </style>
    </head>
    <body>
        <div class="news">
            <img src="1.jpg"/>
            <p>some text</p>
        </div>
    </body>
    </html>

    方法三父元素添加overflow:hidden;或overflow:auto;(这种方法可行)

    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            .news {
            background-colorgray;
            bordersolid 1px black;
            overflow:auto;/*hidden*/
            }

            .news img {
            floatleft;
            }

            .news p {
            floatright;
            }
        </style>
    </head>
    <body>
        <div class="news">
            <img src="1.jpg"/>
            <p>some text</p>
        </div>
    </body>
    </html>

    方法四父元素添加float属性。但是这样会使其整体浮动,影响布局,不推荐使用。

    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>index</title>
        <style>
            .news {
            background-colorgray;
            bordersolid 1px black;
            floatleft;
            }

            .news img {
            floatleft;
            }

            .news p {
            floatright;
            }
        </style>
    </head>
    <body>
        <div class="news">
            <img src="1.jpg"/>
            <p>some text</p>
        </div>
    </body>
    </html>

     

    总共两种思路:

    1.方法一和二都是利用clear属性,禁止左/右侧存在浮动元素。

    2.方法三和四,对父元素处理,使之变成BFC。

  • 相关阅读:
    Linux 信号:signal 与 sigaction
    Linux shell(1)
    【Beta阶段】第一次scrum meeting
    【Beta阶段】计划安排
    团队作业7——Alpha冲刺之事后诸葛亮
    团队作业5——测试与发布(Alpha版本)
    【Alpha阶段汇总】成果展示与体验总结
    【Alpha阶段】第七次scrum meeting
    【Alpha阶段】第六次scrum meeting
    【Alpha阶段】第五次scrum meeting
  • 原文地址:https://www.cnblogs.com/shen076/p/6537461.html
Copyright © 2020-2023  润新知