元素的浮动布局

最新推荐文章于 2021-05-10 16:35:20 发布

妍华

最新推荐文章于 2021-05-10 16:35:20 发布

阅读量194

点赞数

分类专栏： java web学习笔记

本文链接：https://blog.csdn.net/yanhua1575/article/details/104929220

版权

java web学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

浮动元素会脱离网页文档,与其他元素发生重叠，但是不会与文字内容发生重叠

利用这一特性可以做出文字浮动效果

浮动方式：
在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style type="text/css">
    .green{
        width: 100px; height: 100px;
        background-color: #9d8149;
        float: left }
    .red{
        width: 200px; height: 150px;
        background-color: #8078ff;
    }
    .a{
        width: 200px;
        background-color: #9d8149;
    }
    .b{
        width: 700px;
        background-color: #5aa145;
    }
    .c{
        width: 300px;
        background-color: #71a118;
    }
    .a,.b ,.c {
        float: left;height: 200px;
    /*    重复的标签内容可放一起*/
    }
</style>
<body>
    <p>文字环绕效果</p>
    <div class ="green">
        妍华妍华妍华妍华妍华妍华妍华
        妍华妍华妍华妍华妍华妍华妍华
    </div>
    <div class ="red"></div>

    <p>横向排版布局</p>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</body>

网页效果如下：
在这里插入图片描述
但此时对下一个元素进行操作，浮动元素有可能遮盖掉其他元素，
如下：黑色元素height：360px被上面横向排版元素元素
height：200px遮挡了

此时我们可以给横向排版元素设置一个父元素，对于下面的元素而言，父元素明显不涉及浮动遮盖

<body>                
<div class="outer">   
    <div class="a"></d
    <div class="b"></d
    <div class="c"></d
</div>                
  <div class="hh"></di
</body>

父元素设置高度
是因为子元素浮动不占据空间，父元素高度坍塌，无法被子元素撑开

（虚线部分表示父元素）
在这里插入图片描述
overflow:auto;
对于超出边界的子元素，父元素能自动调整

还可为不希望受到浮动影响的元素添加属性
clear:left/right/both
注：clear：both表示当前元素即不受左浮动影响也不受右浮动影响

浮动元素排列问题
浮动元素在排列时，只参考前一个元素即可
如下：4号元素横向排列不下就会出现在3号元素之下
在这里插入图片描述
右浮动的排列问题
按照次序依次靠右排列，
如下：对123进行右浮动

则1最靠右，其次是2，跟我们的代码顺序完全相反

浮动元素的重叠问题

1.浮动元素不会覆盖文字内容

2浮动元素不会覆盖图片內容
(因为图片本身也属于文本,可以图片看做是一个特殊的文字）

3浮动元素不会覆盖表单元素
(输入框、单选按钮、复选框、按钮、下拉选择框等)

妍华

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素的浮动布局

浮动元素会脱离网页文档,与其他元素发生重叠，但是不会与文字内容发生重叠利用这一特性可以做出文字浮动效果浮动方式：<head> <meta charset="UTF-8"> <title></title></head><style type="text/css"> .green{ ...
复制链接

扫一扫