浮动的基本概念、浮动的顺序贴靠特性、使用浮动实现网页布局

最新推荐文章于 2023-12-16 06:30:00 发布

头发还多

最新推荐文章于 2023-12-16 06:30:00 发布

阅读量169

点赞数

分类专栏： js学习内容记录文章标签： css3

本文链接：https://blog.csdn.net/qq_44935762/article/details/118853230

版权

js学习内容记录专栏收录该内容

56 篇文章 0 订阅

订阅专栏

浮动用来实现并排：

浮动的本质功能：实现并排
浮动使用要点：要浮动，并排的盒子都要设置浮动，否则会出现要并排的盒子到底层被覆盖
父盒子要有足够的宽度，否则子盒子会掉下去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动的基本概念</title>
    <style>
        .box {
            width: 600px;
            height: 200px;
            border: 1px solid black;
        }
        .box .c1 {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            float: left;
        }
        .box .c2 {
            width: 200px;
            height: 200px;
            background-color: green;
            float: left;
        }
        .box .c3 {
            width: 200px;
            height: 200px;
            background-color: orange;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="c1"></div>
        <div class="c2"></div>
        <div class="c3"></div>
    </div>
</body>
</html>

浮动的顺序贴靠特性：

子盒子会按顺序进行贴靠，如果没有足够空间，则会找寻再前一个兄弟元素
浮动元素一定能够设置宽高
浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，及时它是span或者a标签等

右浮动：

float：right；即可设置右浮动

使用浮动实现网页布局：

垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动！
“大盒子带着小盒子跑”，一个大盒子种，又是一个小天地，内部可以继续使用浮动
div是免费的，不要节约使用

头发还多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动的基本概念、浮动的顺序贴靠特性、使用浮动实现网页布局

浮动用来实现并排：浮动的本质功能：实现并排浮动使用要点：要浮动，并排的盒子都要设置浮动，否则会出现要并排的盒子到底层被覆盖父盒子要有足够的宽度，否则子盒子会掉下去<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n
复制链接

扫一扫