默认文档流、浮动布局、清除浮动

默认文档流

默认文档流的特征:文档结构从外到内,自上而下,从左到右
项目中使用默认文档流来实现第一层结构的布局/第二层结构的布局
正常的文档流结点树
1.块级元素:(垂直方向的线性结构)宽度默认100%,高度默认由子元素填充好,但css中宽高也可重新定义
2.行内元素:(水平方向的线性结构)宽高由内容决定,不可以自定义

浮动布局float

脱离正常的文档流、脱离结点树,浮动在后面的兄弟节点之上
作用:针对块级元素操作,经过float操作之后块级元素也可实现从左到右布局

none

默认为none,即不脱离文档流

    <style>
          body>div>div{
            width: 200px;
            height: 200px;
            background-color: rgba(255, 0, 0, 0.3);
        }
        .one>div{
            float: none;
        }
    </style>
</head>
<body>
    <div class="one">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="two">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

网页效果:
在这里插入图片描述

left

float:left/right 浮动是针对修饰的当前元素进行脱离
margin-left+margin-top:搭配left来定边距
margin-right+margin-top:搭配right来定边距

不要float和left、right、top、bottom直接搭配使用

<style>
          body>div>div{
            width: 200px;
            height: 200px;
            background-color: rgba(255, 0, 0, 0.3); 
        }
        .one>div{
            float: left;
        }
    </style>
</head>
<body>
    <div class="one">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="two">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

网页效果:
在这里插入图片描述

.three>div{
            background-color: rgba(0, 255, 0, 0.3);
        }
 /*  第1、2个div:非正常的文档流 浮动
     第三个div:正常的文档流 */
        .three>div:nth-child(1),.three>div:nth-child(2){
            float: left;
        }
        
        <div class="three">
        <div></div>
        <div></div>
        <div></div>
    </div>

网页效果:
在这里插入图片描述

right

.three>div{
            background-color: rgba(0, 255, 0, 0.3);
        }
        .three>div:nth-child(1),.three>div:nth-child(2){
           float: right;
        }
        
        <div class="three">
        <div></div>
        <div></div>
        <div></div>
    </div>

网页效果:
在这里插入图片描述

父元素的支撑

解决 失去对父元素的支撑 问题:1.clear:both;
                			2.父元素:设置高度
                 			3.父元素 overflow:hidden;
ul#u2 li{
            float: right;
        }
        ul#u2::after{
            content: '';
            display: block;
            clear: both;
        }
        /* clear:both; */
        
        
    <ul id="u2">
        <li>退出</li>
        <li>购物车</li>
        <li>收藏</li>
        <li>我的</li>
    </ul>
    <div class="imgshow"></div>

网页效果:
在这里插入图片描述

ul#u3 li{
            float: left;
        }
        ul#u3{
            height: 40px;
             /* 父元素:设置高度 */
        }
<ul id="u3">
        <li>菜单</li>
        <li>菜单</li>
        <li>菜单</li>
        <li>菜单</li>
    </ul>
    <div class="imgshow"></div>

网页效果:
在这里插入图片描述

  ul#u4 li{
            float: left;
        }
        ul#u4{
            overflow: hidden;
            /* 父元素 overflow:hidden; */
        }
 <ul id="u4">
        <li>菜单</li>
        <li>菜单</li>
        <li>菜单</li>
        <li>菜单</li>
    </ul>
    <div class="imgshow"></div>

网页效果:
在这里插入图片描述

多列布局

一行两列

.one div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .one>div:first-child{
        /* 下面三行设置与last-child的设置相对应,一起完成一行两列效果 */
            /* float: left; */
            /* float: left; */
            float: right;
        }
        .one>div:last-child{
            /* float: left; */
            /* float: right; */
            /* 不赋值 对父元素有支撑 */
        }
        
  <div class="one">
        <div>2</div>
        <div>1</div>
    </div>

网页效果:
在这里插入图片描述
一行四列

.two>div{
/* 设置为边框盒子,可以解决因为加边框或者padding值等发生的盒子大小不一致问题 */
            box-sizing: border-box;

            width: 20%;
            /* 平均分配占据的大小 */

            height: 100px;
            background-color: palegoldenrod;
            float: left;
            margin-left: 4%;
            
            margin-bottom: 20px;
           /* 设置该值让元素有边距 */ 
        }
        .two>div:nth-child(2){
            border: 10px solid red;
        }
        .two>div:nth-child(3){
            padding: 20px;
        }
        .two::after{
            /* 让后面元素不浮动到two的同一行中 */
            content: '';
            display: block;
            clear: both;
        }

<div class="two">
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>

网页效果:
在这里插入图片描述
未设置margin-bottom时:
在这里插入图片描述
多行多列
与上面类似

文字环绕图片

 img{
            float: left;
            /* float: right; */
            
            margin-right: 20px;
            /* 与文字保持举例↑ */
        }
        <img src="../图片文件/验证码.png">文字

网页效果:
在这里插入图片描述

清除浮动clear

float浮动产生的问题:①失去对父元素的支撑(overflow:hidden;)
②兄弟元素会顶上来(清除浮动clear:both;)
未清除浮动时:
在这里插入图片描述

clear属性规定元素的哪一侧不允许其他浮动元素
left在左侧不允许浮动元素
right在右侧不允许浮动元素
none默认值。允许浮动元素出现在两侧
inherit规定应该从父元素继承 clear 属性的值
both在左右两侧均不允许浮动元素
  .imgleft{
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
            margin-left: 50px;
        }
        #detail{
            width: 800px;
            height: 200px;
            background-color: plum;
/*书写位置1:下一个非浮动的兄弟节点*/
            clear: both;
            /* 对当前元素的之前元素进行冻结(清除兄弟元素浮动产生的影响)*/
        }
<div>
    <div class="imgleft"></div>
    <div class="imgleft"></div>
    <div class="imgleft"></div>
    <div id="detail"></div>     

网页效果:
在这里插入图片描述

/*书写位置2:在下一个位置新增一个兄弟<divclass="clearboth"></div>*/

/*在html文件中添加一个无意义的div*/
<div id="clearboth"></div>
/*然后在css样式中写这样的一个公共样式*/
  .clearboth{
            clear: both;
        }
/*书写位置3:在最后一个元素后新增一个兄弟(伪元素) 
父元素::after{content: '';                                                       
display: block;                                                              
clear: both;} */
ul li{
            float: left;
            margin-left: 20px;
        }
        /* 在ul后面新增伪元素清除浮动 */
        ul::after{
            content: '';
            display: block;
           }

<ul>
        <li>菜单1</li>
        <li>菜单2</li>
        <li>菜单3</li>
        <li>菜单4</li>
    </ul>
    <div id="article"></div>

清除浮动前后网页效果对比:
在这里插入图片描述

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值