CSS浮动与清除浮动

最新推荐文章于 2024-07-11 17:28:05 发布

鲁kk

最新推荐文章于 2024-07-11 17:28:05 发布

阅读量96

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/weixin_45905955/article/details/115270738

版权

浮动以及清除浮动的方法

通过学习我们可以把一个网页看成是有不同的盒子所组成，大部分的HTML标签就是一个盒子。使用浮动，定位可以是不同的盒子排列成我们想要的网页布局。一个完整的网页是有标准流，浮动，定位所结合布局形成。

标准流

块元素，行元素，行内块元素标签实现网页元素从上到下，从左到右排列

浮动

可以使块级元素左右排列或者一行显示，多个块级盒子水平显示就用浮动布局

定位

定位的最大特点是有层叠的概念，就是可以让多个盒子相互叠压来显示，如果元素自由在某个盒子内移动就使用定位布局

浮动：是使网页元素脱离标准流的一种布局形式。主要应用场景是使块级元素从左到右水平排列，或者是制作文字环绕图片的效果。

语法格式：float:left|right

<head>
    <style>
    .box{
            width: 1100px;
            height: 300px;
            background-color: burlywood;
        }
     .item{
            float: left;
            width: 200px;
            height: 300px;
            margin-right: 5px;
            background-color: cadetblue;
        }
     .box div:nth-child(odd){
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <div class="box">
         <div class="item">1</div>
         <div class="item">2</div>
         <div class="item">3</div>
         <div class="item">4</div>
         <div class="item">5</div>  
	</div>
</body>

在标准文档流中，5个类名是item的小盒子本来是从上往下垂直排列并且嵌套在类名是box的大盒子中；由于，我们给.item设置了左浮动(float:left;)，故每一个以.item为类名的div从左到右水平排列。

注意：浮动的元素不在占有自己原来的位置。

浮动带来的影响

元素设置浮动之后，会对设置了浮动元素之后的元素产生相应的影响。

<style>
        .box{
            width: 1100px;
            background-color: turquoise;
        }
        .item{
            float: left;
            width: 200px;
            height: 200px;
            background-color: violet;
        }
        .box .item:nth-child(odd){
            background-color: yellowgreen;
        }
        .content{
            width: 300px;
            height: 300px;
            background-color: tomato;
        }
</style>
<div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
    <div class="content"></div>

在本案例中，以.item为类名的五个div设置了左浮动，设置了浮动的元素都脱离了标准流的布局模式，简称脱标；在标准流的布局模式中，.box的高度会由.item的内容所撑起，由于我们给.item设置了左浮动，.box的所有子元素脱标，所以.box的高度为0px。只有.box和.content在标准流的布局模式中，所以.content在页面的左上角排列。

在这里插入图片描述

清除浮动的方法

清除浮动：就是清除浮动带来的影响

清楚浮动的方法：

给浮动元素的父元素设置高度
隔墙法也称额外标签法，会在页面中增加额外的空标签
overflow：hidden 给父元素添加
伪元素法
双伪元素法

<style>
        .box{
            width: 1200px;
            /* height: 240px; */
            border: 1px solid #333;
            /* overflow: hidden; */
        }
        .item{
            float: left;
            width: 200px;
            height: 200px;
        }
        .box div:nth-child(even){
            background-color: violet;
        }
        .box div:nth-child(odd){
            background-color: turquoise;
        }
        .box2{
            width: 1100px;
            height: 400px;
            background-color: tomato;
        }

        /* 隔墙法（额外标签法） */
        /* .clearfix{
            clear: both;
        } */

        /* 
        xx::after伪元素选择器，
        它类似于一个行标签，
        可以把它当作标签去使用 
        .clearfix::after{
            content:'';
            display: block;
            clear: both;
            visibility: hidden;
            height: 0;
        } 
        .clearfix{
             IE 6 7专有 
            *zoom: 1;
        }
        */
        
        /* 双伪元素 */
        .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
        }
        .clearfix::after{
            clear: both;
        }
        .clearfix{
            /* IE6 7专有 */
            *zoom: 1;
        }
    </style>
</head>
<body>
     <div class="box clearfix">
         <div class="item">1</div>
         <div class="item">2</div>
         <div class="item">3</div>
         <div class="item">4</div>
         <div class="item">5</div>
         <!-- <div class="clearfix"></div> -->
     </div>
     <div class="box2"></div>
</body>

鲁kk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS浮动与清除浮动

浮动以及清除浮动的方法通过学习我们可以把一个网页看成是有不同的盒子所组成，大部分的HTML标签就是一个盒子。使用浮动，定位可以是不同的盒子排列成我们想要的网页布局。一个完整的网页是有标准流，浮动，定位所结合布局形成。标准流块元素，行元素，行内块元素标签实现网页元素从上到下，从左到右排列浮动可以使块级元素左右排列或者一行显示，多个块级盒子水平显示就用浮动布局定位定位的最大特点是有层叠的概念，就是可以让多个盒子相互叠压来显示，如果元素自由在某个盒子内移动就使用定位布局浮动：是使网页元素脱离标准流
复制链接

扫一扫