元素浮动的问题

时间2024-01-23 02:02:12发布访客分类HTML浏览577

导读：收集整理的这篇文章主要介绍了元素浮动的问题，觉得挺不错的，现在分享给大家，也给大家做个参考。子元素浮动会导致父元素盒子无法被撑开，导致父元素的样式无法显示，以下介绍几种清除浮动的方法原代码：<!DOCTYPE htML><...

收集整理的这篇文章主要介绍了元素浮动的问题，觉得挺不错的，现在分享给大家，也给大家做个参考。子元素浮动会导致父元素盒子无法被撑开，导致父元素的样式无法显示，以下介绍几种清除浮动的方法

原代码：

!DOCTYPE htML>
    html>
    head lang="en">
        meta charset="UTF-8">
        tITle>
    /title>
        style type="text/css">
        #content{
                border: 1px red solid;
        }
        .fl{
                border: 1px blueviolet solid;
                height: 100px;
                width: 100px;
                float: left;
        }
        .fr{
                border: 1px green solid;
                height: 200px;
                width: 200px;
                float: right;
        }
        /style>
    /head>
    body>
    p id="content">
        p class="fl">
    内容一/p>
        p class="fr">
    内容二/p>
    /p>
    /body>
    /html>

显示如下：

1、设置父元素高度：

height: 500px;
     /*设置父元素高度*/

!DOCTYPE html>
    html>
    head lang="en">
        meta charset="UTF-8">
        title>
    /title>
        style type="text/css">
        #content{
                border: 1px red solid;
                height: 500px;
 /*设置父元素高度*/        }
        .fl{
                border: 1px blueviolet solid;
                height: 100px;
                width: 100px;
                float: left;
        }
        .fr{
                border: 1px green solid;
                height: 200px;
                width: 200px;
                float: right;
        }
        /style>
    /head>
    body>
    p id="content">
        p class="fl">
    内容一/p>
        p class="fr">
    内容二/p>
    /p>
    /body>
    /html>

2、父元素绝对定位：position:absolute;

!DOCTYPE html>
    html>
    head lang="en">
        meta charset="UTF-8">
        title>
    /title>
        style type="text/css">
        #content{
                border: 1px red solid;
                position: absolute;
 /*父元素绝对定位*/        }
        .fl{
                border: 1px blueviolet solid;
                height: 100px;
                width: 100px;
                float: left;
        }
        .fr{
                border: 1px green solid;
                height: 200px;
                width: 200px;
                float: right;
        }
        /style>
    /head>
    body>
    p id="content">
        p class="fl">
    内容一/p>
        p class="fr">
    内容二/p>
    /p>
    /body>
    /html>

3、父元素设置overflow：hidden

!DOCTYPE html>
    html>
    head lang="en">
        meta charset="UTF-8">
        title>
    /title>
        style type="text/css">
        #content{
                border: 1px red solid;
                overflow: hidden;
         }
        .fl{
                border: 1px blueviolet solid;
                height: 100px;
                width: 100px;
                float: left;
        }
        .fr{
                border: 1px green solid;
                height: 200px;
                width: 200px;
                float: right;
        }
        /style>
    /head>
    body>
    p id="content">
        p class="fl">
    内容一/p>
        p class="fr">
    内容二/p>
    /p>
    /body>
    /html>

4、父元素设置浮动：float：left/right

!DOCTYPE html>
    html>
    head lang="en">
        meta charset="UTF-8">
        title>
    /title>
        style type="text/css">
        #content{
                border: 1px red solid;
                float: left;
         }
        .fl{
                border: 1px blueviolet solid;
                height: 100px;
                width: 100px;
                float: left;
        }
        .fr{
                border: 1px green solid;
                height: 200px;
                width: 200px;
                float: right;
        }
        /style>
    /head>
    body>
    p id="content">
        p class="fl">
    内容一/p>
        p class="fr">
    内容二/p>
    /p>
    /body>
    /html>

5、在子元素最后添加一个空盒子，并设置样式为clear:both;

!DOCTYPE html>
    html>
    head lang="en">
        meta charset="UTF-8">
        title>
    /title>
        style type="text/css">
        #content{
                border: 1px red solid;
        }
        .fl{
                border: 1px blueviolet solid;
                height: 100px;
                width: 100px;
                float: left;
        }
        .fr{
                border: 1px green solid;
                height: 200px;
                width: 200px;
                float: right;
        }
       .clear{
                clear: both;
        }
         /style>
    /head>
    body>
    p id="content">
        p class="fl">
    内容一/p>
        p class="fr">
    内容二/p>
        p class="clear">
    /p>
    /p>
    /body>
    /html>

6、在父元素样式上添加一个伪类，相当于在子元素最后添加一个空盒子，原理与5类似

!DOCTYPE html>
    html>
    head lang="en">
        meta charset="UTF-8">
        title>
    /title>
        style type="text/css">
        #content{
                border: 1px red solid;
        }
        .fl{
                border: 1px blueviolet solid;
                height: 100px;
                width: 100px;
                float: left;
        }
        .fr{
                border: 1px green solid;
                height: 200px;
                width: 200px;
                float: right;
        }
        #content:after{
                content: '';
                display: block;
                /!*height: 0;
    *!/            clear: both;
        }
        /style>
    /head>
    body>
    p id="content">
        p class="fl">
    内容一/p>
        p class="fr">
    内容二/p>
    /p>
    /body>
    /html>

以上就是元素浮动的问题的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

浮动问题

若转载请注明出处：元素浮动的问题
本文地址： https://pptw.com/jishu/583659.html

html5播放视频教程 HTML5新增标签使用方法