CSS学习（第五篇）

最新推荐文章于 2022-04-26 21:55:52 发布

努力学习11

最新推荐文章于 2022-04-26 21:55:52 发布

阅读量71

点赞数

分类专栏： CSS学习文章标签：其他经验分享 css

本文链接：https://blog.csdn.net/weixin_45691018/article/details/119545068

版权

CSS学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

浮动

为什么需要浮动？

因为有很多的布局效果，标准流没有办法完成，次数可以利用浮动完成布局。浮动可以改变元素标签默认的排列方式。浮动可以使多个块级元素一行内排列显示。

注：

标准流：标准流的排版方式，又称为：文档流/普通流，所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。在CSS中将元素分为三类：分别是块级、行内元素、行内块。

如图：

面对这种情况采用传统的标准流设计网页很不方便，但采用浮动就简单很多。

浮动的用法

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法

float : none | left |right

参数：

none : 　对象不浮动
left : 　对象浮在左边
right : 　对象浮在右边

注：

浮动元素会脱离标准流（脱标）并且浮动的盒子不在保留原先的位置。可以想象成一个三维空间内的。标准流是在平面内，浮动元素脱离平面，在平面上空，所以原先的平面空间空出来了。
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块的性质

案例：

<!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>Document</title>
    <link rel="stylesheet" href="css1.css">
    <style>
   div {
       width: 300px;
       height: 300px;
       background-color: skyblue;
       float: left;
       margin-right: 30px;
   }
 
    </style>
</head>
<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</body>
</html>

结果：

注：

浮动通常和标准流的父盒子搭配，盒子的嵌套使用
一个元素浮动了，理论上其余的兄弟元素也要浮动（浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流）

为什么需要清除浮动

在日常网页设计中，会面临无法确定盒子的具体高度，我们希望它可以根据盒子内容的大小自行调节，但如果盒子内的元素浮动的话，父亲盒子内不占地方，所以显示盒子高度为0px，这是就会被其他盒子挤占空间。

如图：

<!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>Document</title>
    <link rel="stylesheet" href="css1.css">
    <style>
   .nav2 {
       width: 300px;
       height: 300px;
       background-color: skyblue;
       float: left;
       margin-right: 30px;
   }
 .nav {
   width: 1000px;
     background-color: black;
 }
 .nav1 {
     width: 100%;
     height: 200px;
     background-color: pink;
 }
    </style>
</head>
<body>
    <div class="nav">
  <div class="nav2">1</div>
  <div class="nav2">2</div>
  <div class="nav2">3</div>
    </div>
  <div class="nav1"></div>
</body>
</html>

按代码显示，三个蓝盒子应该装在一个背景为黑色的盒子里，但后面却是粉色的盒子？

是因为三个蓝色盒子都设置了浮动，所以父亲盒子高为0px，导致位置被粉色的盒子抢占。

清除浮动

清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流。

语法
clear : none | left |right | both
参数：
none : 　允许两边都可以有浮动对象
both : 　不允许有浮动对象
left : 　不允许左边有浮动对象
right : 　不允许右边有浮动对象

清除浮动方法

清除浮动方法大致可以分为四种

额外标签法也称隔墙法
父级添加overflow属性
父级添加after伪元素
父级添加双伪元素

额外标签法

额外标签法在浮动元素后添加一个空标签。并且对该空并且设置颜色clear：both.注意该空标签要是块级元素

代码：

  <style>
   .nav2 {
       width: 300px;
       height: 300px;
       background-color: skyblue;
       float: left;
       margin-right: 30px;
   }
 .nav {
   width: 1000px;
     background-color: black;
 }
 .nav1 {
     width: 100%;
     height: 200px;
     background-color: pink;
 }
 /* 清除浮动 */
 .clear {
     clear: both;
 }
    </style>
</head>
<body>
    <div class="nav">
  <div class="nav2">1</div>
  <div class="nav2">2</div>
  <div class="nav2">3</div>
  <!-- 空标签 -->
  <div class="clear"></div>
    </div>
  <div class="nav1"></div>
</body>

结果：

成功显示黑色背景盒子

优点：通俗易懂，书写方便

缺点：添加无意义标签，结构化差

父级添加overflow属性

可以给父级添加overflow属性，将其属性设置hidden、auto或scroll。

例.

 .nav2 {
       width: 300px;
       height: 300px;
       background-color: skyblue;
       float: left;
       margin-right: 30px;
       /* 父级元素设置 */
       overflow: hidden;
   }

优点：代码简洁

缺点：无法显示溢出部分

父级添加after伪元素

:after方式是额外标签法的升级，相当于给浮动元素后加一个空标签，也是给父元素添加

.clearfix:after {
content:"";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* ie6,7专有 */
.clearfix {
*zoom: 1;
}

优点：没有增加标签，结构更简单

缺点：照顾低版本浏览器

父级添加双伪元素

相当于给浮动元素前后各加一个空标签，给父元素添加

/* 双伪元素 */
.clearfix::before,.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix {
    *zoom:1;
}

优点：没有增加标签，结构更简单

缺点：照顾低版本浏览器

努力学习11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录