浮动标签笔记

最新推荐文章于 2024-07-09 22:55:28 发布

rose0506

最新推荐文章于 2024-07-09 22:55:28 发布

阅读量279

点赞数 6

文章标签： html

本文链接：https://blog.csdn.net/rose0506/article/details/138466819

版权

!DOCTYPE html>
<html>
   <head>
       <meta charset=";utf-8"; />
       <title>浮动</title>
       
       <style>
           .box {
               width: 200px;
               height: 200px;
               border: 1px solid green;
               text-align: center;
               font-size: 32px;
               /* 浮动:让块级盒子水平摆放 */
               /* 浮动float:left(左浮动)/right(右浮动)/none(默认值) */
               float: left;
           }

           .box2 {
               width: 700px;
               height: 240px;
               border: 1px solid red;
           }

           /* 第一种清除浮动的方法:额外标签法，也叫隔墙法 */
           .clear {
               /* 清除两端浮动 */
               clear: both;
           }

           /* 第二种清除浮动的方法: */
           .bigbox {
               /* overflow: hidden; */
           }

           /* after:在...之后 */
           /* 第三种清除浮动的方法:给父级元素添加after伪元素 */
           .clearfix::after {
               /* 伪类:在clearfix类的后面 */
               content: ";";;
               /* 内容:空 */
               display: block;
               /* 将伪类转为块元素 */
               height: 0;
               clear: both;
               /* 清除两端浮动 */
               visibility: hidden;
               /* 显示状态:隐藏 */
           }

           /* 第四种清除浮动的方法:给父级元素添加双伪元素 */
           .clearfix::before, /* ::before:在...之前 */
           .clearfix::after {
               content: ";";;
               display: table;
           }

           .clearfix::after {
               clear: both;
           }

/*
           浮动的特性:
           1.浮动的盒子会脱离标准流(脱标);
           2.浮动的盒子一行内显示并且顶端对齐，一行装不下会另起一行。
           3.浮动的盒子具有和行内块元素类似的特性。
           */
           /*
           清除浮动的方法:
           1.额外标签法:隔墙法。不建议使用
           2.给父级元素添加overflow:hidden属性
           3.
           4.
           */
       </style>
   </head>
   <body>
       
       <div class=";bigbox clearfix";>
           <div class=";box";>box1</div>
           <div class=";box"; style=";height: 180px;";>box2</div>
           <div class=";box"; style=";height: 230px;";>box3</div>
           
       </div>