11-[CSS]-标准文档流，display，浮动，清除浮动，overflow

1、标准文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        span{
            font-size: 50px;
        }
    </style>
</head>
<body>

     <div>
         文字文字文字文字<span>姚明</span>文字文字文字文字文字文字
         <img src="./images/企业1.png" alt="">
         <img src="./images/企业2.png" alt="">
        <img src="./images/企业2.png" alt="">
        <img src="./images/企业2.png" alt=""><img src="./images/企业2.png" alt=""><img src="./images/企业2.png" alt=""><img src="./images/企业2.png" alt=""><img src="./images/企业2.png" alt=""><img src="./images/企业2.png" alt="">
     </div>

</body>
</html>

2、display：行内元素与块级元素的转换

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: red;

            /* 控制元素隐藏 不占位置 */
            /*display: none;*/

            /*控制元素隐藏 占位置 影响后面盒子的布局*/
            /*visibility: hidden;*/

            /*转为 行内块元素*/
            /*display: inline-block;*/

            /*将 块级元素转换为 行内元素 不能设置宽高*/
            display: inline;
        }
        a{
            /*display: block;*/
            /*display: inline-block;*/
            width: 300px;
            height: 300px;
            background-color: yellow;
        }

        img{
            /* 行内块元素 一般转化块级元素 */
            /*display: block;*/
            display: inline;  /*转为行内元素 依然可设置宽高 没必要转换  */
            width: 100px;
            height: 100px;

        }
    </style>
</head>
<body>
    <div>123</div>
    <div>987</div>
    <a href="#">百度一下</a>
    <img src="./images/homesmall1.png" alt="python">
</body>
</html>

3、浮动

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">
        .wrap div{
            width: 200px;
            height: 200px;
            background-color: red;
            border: 1px solid black;

            /*
            文档流：可见元素在文档中的显示位置；
            浮动产生的效果：
                浮动可以使元素按指定位置排列，直到遇到父元素的边界或者另一个元素的边界停止
            */

            /* left 左浮动 左侧为起始，从左往右依次排列*/
            float: left;

            /* right 右浮动 右侧为起始，从右往左依次排列  */
            /*float: right;*/

            /*float: none;*/

        }
    </style>
</head>
<body>
    <div class="wrap">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>

　　（1）脱离了标准文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;

        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: yellow;

        }
        span{
            background-color: green;
            float: left;
            width: 300px;
            height: 50px;
        }
    </style>
</head>
<body>

    <!--
        脱标： 脱离了标准文档流

        小红盒子浮动了，脱离了标准流，此时小黄这个盒子就是标准文档流中的第一个盒子。所以就渲染到了左上方。  浮动元素 “飘起来了”

     -->

     <div class="box1">小红</div>
     <div class="box2">小黄</div>

    <!--
        span标签不需要转成块级元素，也能够设置宽高。

        所有的标签一旦设置浮动，能够并排，都不区分行内、块状元素，设置宽高
     -->
     <span>span标签</span>
     <span>span标签</span>

</body>
</html>

　　（2）互相贴靠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        span{
            background-color: red;
            float: left;
        }
        .box1{
            width: 100px;
            height: 400px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 150px;

            height: 450px;
            float: left;
            background-color: yellow;
        }
        .box3{
            width: 300px;
            height: 300px;
            float: left;
            background-color: green;
        }
    </style>
</head>
<body>
    <!-- <span>文字</span>
        <span>文字</span> -->

    <!--
        如果父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边。
        如果没有足够的空格，那么就会靠着1哥，如果没有足够的空间靠着1哥，自己往边靠
     -->

    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>

</body>
</html>

　　（3）字围效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        div{
            float: left;
        }
        p{
            background-color: #666;
        }
    </style>
</head>
<body>

    <!-- 所谓字围效果：
        当div浮动，p不浮动
        div挡住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果

        关于浮动我们强调一点，浮动这个元素，我们初期一定要遵循一个原则

        永远不是一个盒子单独浮动，要浮动就要一起浮动。
     -->
    <div>
        <img src="./images/企业1.png" alt="">
    </div>
    <p>
        123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
    </p>

</body>
</html>

　　（4）收缩

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            float: left;
            background-color: red;
        }
    </style>
</head>
<body>

    <!-- 收缩：一个浮动元素。如果没有设置width，
    那么就自动收缩为文字的宽度（这点跟行内元素很像）

        如果想制作整个网页，就是通过浮动来实现并排
     -->

    <div>
        alex
    </div>

</body>
</html>

4、浮动产生的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        *{
            padding: 0;
            margin: 0;

        }
        .father{
            width: 1126px;
            /*子元素浮动 父盒子一般不设置高度*/
              /* 通常页面布局时，父盒子的高度不需要设置，通过子盒子 自动填充父盒子；*/

            /*出现这种问题，我们要清除浮动带来影响*/
            /*height: 300px;*/
            background-color: #0f0f0f;

        }
        .box1{
            width: 200px;

            height: 500px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 300px;
            height: 200px;
            float: left;
            background-color: green;
        }
        .box3{
            width: 400px;
            float: left;
            height: 100px;
            background-color: blue;
        }
        .father2{
            width: 1126px;
            height: 600px;
            background-color: purple;
        }
    </style>
</head>
<body>

    <div class="father">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>

    <div class="father2"></div>

</body>
</html>

5、清除浮动

　　（1）父元素设定高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 400px;

            /*给父盒子设置高度，这种方式不灵活。如果哪天公司产品突然要改，
            要求父盒子高度变大，而且不仅一个地方哦，那么我们不可能去找源码去手动修改*/

            /*固定导航栏*/
            /*height: 40px;*/
        }
        ul{
            list-style: none;
            height: 40px;
        }

        div ul li {
            float: left;
            width: 100px;
            height: 40px;
            background-color: red;
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>

    <div>
        <ul>
            <li>Python</li>
            <li>web</li>
            <li>linux</li>

        </ul>
    </div>
    <div class="box">

    </div>
</body>
</html>

　　（2）内墙法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;

        }

        div{
            width: 400px;

        }

        div ul li {
            float: left;
            width: 100px;
            height: 40px;
            background-color: red;
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>

    <div>
        <ul>
            <li>Python</li>
            <li>web</li>
            <li>linux</li>
            <!-- 给浮动元素最后面加一个空的div 并且该元素不浮动 ，然后设置clear:both,就会撑开盒子，清除别人对我的浮动影响-->
            <!-- 内墙法 -->
            <!-- 无缘无故加了div元素  结构冗余 -->

        </ul>
        <div class="clear"></div>
    </div>
    <div class="box">

    </div>
</body>
</html>

　　（3）伪元素after法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素清除法（常用）</title>
    <style type="text/css">

        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;

        }

        div{
            width: 400px;
        }

        div ul li {
            float: left;
            width: 100px;
            height: 40px;
            background-color: red;
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
        /*伪元素选择器*/
        .clearfix:after{
            /*必须要写这三句话*/
            content: ‘.‘;
            clear: both;
            display: block;
            height: 0;
            visibility: hidden;

            /*
            新浪首页清除浮动伪元素方法
             content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden

            */
        }

    </style>
</head>
<body>

    <div class="clearfix">
        <ul>
            <li>Python</li>
            <li>web</li>
            <li>linux</li>

        </ul>

    </div>
    <div class="box">

    </div>
</body>
</html>

　　（4）overflow:hidden 推荐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素清除法（常用）</title>
    <style type="text/css">

        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;

        }

        .box{
            width: 400px;
            /*父元素不添加高度*/
            overflow: hidden;
        }

        .box ul li {
            float: left;
            width: 100px;
            height: 40px;
            background-color: red;
        }
        .box2{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }

    </style>
</head>
<body>

    <div class="box">
        <ul>
            <li>Python</li>
            <li>web</li>
            <li>linux</li>

        </ul>

    </div>
    <div class="box2">

    </div>
</body>
</html>

6.overflow属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{
            overflow: scroll;
        }
        div{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            /*overflow: visible;*/
            /*overflow: hidden;*/
            /*overflow: scroll;*/
            /*overflow: auto;*/
            overflow: inherit;
        }
    </style>
</head>
<body>
    <div>
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内
        容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内
        容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容    内容内
        容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内
        容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内
        容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    </div>

</body>
</html>

原文地址：https://www.cnblogs.com/venicid/p/9126266.html

时间： 2024-10-11 18:16:00

11-[CSS]-标准文档流，display，浮动，清除浮动，overflow的相关文章

页面标准文档流、浮动层、float属性（转）

CSS float 浮动属性介绍 float属性:定义元素朝哪个方向浮动. 1.页面标准文档流.浮动层.float属性 1.1 文档流 HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行. 1.2 浮动层浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框. 而此浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去:块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素.内联元素

标准文档流.浮动以及清除浮动(学习笔记)

标准文档流 1.当后面空间不够时,会空白折叠,自动换行. 2.当高矮不齐时,会底部对齐. 3.自动换行. 标签根据显示的内容划分成:文本级,容器级. 按照文档流划分:块级元素.行内元素; 块级元素: (1).霸占一行,不能与其他任何元素并列. (2)能接受宽高. (3).如果不设置宽度,那么宽度将默认变为父亲的100%. 行内元素: (1).与其他行内元素并排; (2)不能设置宽高.默认宽度就是文字宽度. 所有的文本级标签,都是行内元素,除了p,p是个文本级,但是是个块级元素. 所有的容器级标签

浮动与清除浮动、标准文档流(重点)

什么是标准文档流宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个"流",从上而下 ,像 "织毛衣".而设计软件 ,想往哪里画东西,就去哪里画标准文档流下有哪些微观现象? 1.空白折叠现象多个空格会被合并成一个空格显示到浏览器页面中.img标签换行写.会发现每张图片之间有间隙,如果在一行内写img标签,就解决了这个问题,但是我们不会这样去写我们的html结构.这种现象称为空白折叠现象. 2.高矮不齐,底边对齐文字还有图片大小不

标准文档流与脱离文档流

在网页当中,所有的元素都有自己的占位. 标准文档流指在没有CSS干预的前提下,块级元素独占一行,可以自行定义宽.高:而行内元素并排显示,宽.高为auto. 常见的块级元素有: <address>地址<caption>表格表格标题<div>划分区域.区块<dl>定义列表<dt>定义列表中的项<dd>列表中定义条目<form>创建一个表单<h>标题标记<hr>一条横线<li>定义列表项目&l

标准文档流以及伪类选择器

标准文档流浏览器排版是根据元素的特征(块和级),从上往下,从左往右排版.这就是标准文档流. float:left/right: 效果:元素都加浮动,后面的元素会紧跟着前面的元素并排排列. A. 只要加了float,这个元素就会脱离标准文档流. (第一个加了float,离了标准文档流,对于浏览器来说,第二个元素就变成了标准文档流中的第一个,于是就会把他排在第一位.而第一个依然存在,所以就会叠加.) 行级加float,就会脱离标准流,块不像块,行不像行,能设置宽高,能并排排列,display就没有

标准文档流伪类选择器

15 标准文档流

标准文档流,又叫普通流,文档流是什么: 文档流就是html页面文档流的布局方式:从左到右,从上到下特点: 拥有块元素,行内元素, margin垂直塌陷,不能移动文字空白出现折叠现象文本类的元素会并排高低不齐底边对齐文字排到最右侧,自动换行 html文档中的元素可以分为两大类:行内元素和块级元素块级元素范围:所有容器级元素都是块级元素,文本级元素中p元素也是块级元素是什么: 1.可以设置宽高的 2.独占一行,不与其他元素并排的 3.未设置宽高时,会继承父亲宽度的100% 如:

css排版之-标准文档流

position:static(静态定位) 当position属性定义为static时,可以将元素定义为静态位置,所谓静态位置就是各个元素在HTML文档流中应有的位置 podisition定位问题.所以当没有定义position属性时,并不说明该元素没有自己的位置,它会遵循默认显示为静态位置,在静态定位状态下无法通过坐标值(top,left,right,bottom)来改变它的位置. position:absolute(绝对定位) 当position属性定义为absolute时,元素会脱离文档流

css脱离文档流

Q:什么是文档流? A:简单的说可以理解为元素在页面上出现的先后顺序. Q:什么情况下会脱离文档流? A:当使用“浮动”与“绝对定位”时. Q:脱离文档流就不占据空间了吗? A:可以这么说.更准确地一点说,是一个元素脱离文档流之后,其他的元素在定位的时候会当做没看见它,两者位置重叠都是可以的. Q: 脱离文档流是不是指该元素从dom树中脱离? A: 不是,用浏览器的审查元素就可以看到脱离文档流的元素(例如被float了)依然会出现在dom树里. 需要注意的是,使用float脱离文档流时,其他盒子