H5浮动练习

最新推荐文章于 2024-04-26 22:21:10 发布

一只头秃的死肥宅

最新推荐文章于 2024-04-26 22:21:10 发布

阅读量1.2k

点赞数

分类专栏： HTML5 文章标签： HTML5 新手盒子布局浮动

本文链接：https://blog.csdn.net/xuemoKingDeath/article/details/70197349

版权

HTML5 专栏收录该内容

54 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
       #header{
           height: 100px;
           background-color: red;
       }
        #body{

            background-color: green;
        }
        #foot{
            height: 100px;
            background-color: blue;
        }
        #left{
            height: 280px;
            width: 15%;
            background-color: #4d2e83;
            float: left;
        }
        #center{
            height: 280px;
            width: 70%;
            background-color: brown;
            float: left;
        }
        #right{
            height: 280px;
            width: 10%;
            background-color: lightcoral;
            float: left;
        }
        #bottom{
            height: 20px;
            background-color: gold;
            clear: both;
        }
        /*清除浮动方式一
             在父元素中添加一个新的元素
             为新元素设置clear：both*/
       /*清除浮动方法二
            .clearfix:after{
             content: "";
             display: table;
             clear: both;
         }*/
        /*清除父级的浮动*/

                /*清除父级的浮动
        after:渲染后加内容
        content：加一个空字符串
        dispay：字符串的表现形式为表格
        clear:清除浮动*/
        什么是标准流，什么是非标准流
          标准流：没有用到定位和浮动
          非标准流：用到了定位和浮动        .clearfix:after{             content: "";             display: table;             clear: both;         }    </style>    <title>Float浮动消除</title>    <!--Float属性使元素脱离了常规文档流而表现为向右或向左浮动        Float属性的取值 ：right left none      1.浮动盒子的宽度不会自动伸展，宽度以内容和margin、padding属性为准      2.标准流中其他盒子将视浮动盒子不存在而占据浮动盒子的位置，但内容会        受到浮动盒子宽度的影响      3.可以设置clear属性使标准流中其他盒子不受之前盒子的浮动影响      4.父级盒子中的所有盒子都采取浮动形式，若父级盒子未指定高度则父级盒子的高度        为0，因为所有盒子都是浮动已经脱离标准流。解决方法增加一个标准流的盒子--></head><body><div>    <div id="header"></div>    <div id="body" class="clearfix">        <div id="left"></div>        <div id="center"></div>        <div id="right"></div>        <!--<div id="bottom"></div>-->    </div>    <div id="foot"></div></div></body></html>

一只头秃的死肥宅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5浮动练习

html>html lang="en">head> meta charset="UTF-8"> style> #header{ height: 100px; background-color: red; } #body{ background-color: gree
复制链接

扫一扫