CSS——display和浮动

文章目录

CSS——display和浮动

display

display 属性规定元素应该生成的框的类型。

display可能的值

none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	既是行内也是块级元素，同时可以内联在一行（常用）。

display测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
     
     
        width:200px;
        height:200px;
        border:2px solid red;
        display:inline;/*把块级元素变为行内元素*/

        }
        span{
     
     
        width:200px;
        height:200px;
        border:2px solid red;
        display:inline-block;/*把行内元素变为块级元素   inline-block既是行内也是块级元素，同时可以内联在一行   display:none:删除*/
        }

    </style>
</head>
<body>
<div>div块级元素</div>
<span>span行内元素</span>    <!--行内元素和高度宽度没有关系，只和"span行内元素"有关系-->
</body>
</html>

效果图
在这里插入图片描述

浮动（float）

float属性指定一个盒子（元素）是否应该浮动。

注意： 绝对定位的元素忽略float属性 ,浮动起来后元素就不在标准文档流里面了！

left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>

<div class="text">
    <div class="layer01"> <img src="images/1.jpg" alt=""> </div>
    <div class="layer02"> <img src="images/4.jpg" alt=""> </div>
    <div class="layer03"> <img src="images/11-20.jpg" alt=""> </div>
    <div class="layer04">
     浮动的盒子可以向左浮动，也可以向右浮动 直到它的外边缘碰到
    </div>

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

div{
    
    
  margin:10px;
  padding:5px;
}
.text{
    
    
  border:1px solid #000;
}
.layer01{
    
    
  border:1px dashed #f00;
  display:inline-block;
  float:right;
}
.layer02{
    
    
  border:1px dashed #f00;
  display:inline-block;
  float:right;
}
.layer03{
    
    
  border:1px dashed #f00;
  display:inline-block;
  float:left;
  /*浮动起来后就不在标准文档流里面了*/
}
.layer04{
    
    
  border:1px dashed #666;
  font-size:12px;
  line-height:23px;
  display:inline-block;
  float-left
}

效果图

在这里插入图片描述

解决浮动中父级边框塌陷的问题

clear属性：clear 属性规定元素的哪一侧不允许其他浮动元素。

left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。（常用）
none	默认值。允许浮动元素出现在两侧。

.layer03{
    
    
  border:1px dashed #f00;
  display:inline-block;
  float:left;
  clear:both; /*当两边都不允许存在浮动元素时，该元素会自动往下移*/

方法一：增加父级边框的高度**

.father{
    
    
  border:1px solid #000;
  height:800px;

方法二：增加一个空的div标签，清除浮动

<div class="text"></div>

.text{
    
    
  clear:both;
  margin:0;
  padding:0;
}

方法三：在父级元素中使用overflow-hidden（简单）

overflow 属性规定当内容溢出元素框时发生的事情。

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

.father{
    
    
  border:1px solid #000;
  overflow:hidden;/*父级边框最后的高度由所有的元素决定，因此不会出现内容被剪切的情况*/

补充：overflow:scroll;测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #text{
     
     
           width:200px;
           height:400px;
           overflow:scroll;/*不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。*/
        }

    </style>
</head>
<body>
<div id="text">
    <img src="images/1.jpg" alt="">
    <p>
        　人生是一场醒悟，不要昨天，不要明天，只要今天。 　　许多事，要靠自己去做，才能深深体会个中滋味; 　　许多事，要靠自己去扛，才会渐渐明白其中的分量; 　　许多事，要靠自己去想，才越来越清晰，越来越明了。
    </p>
</div>

</body>
</html>

效果图
在这里插入图片描述

方法四：父类添加一个伪类：after(推荐使用)

直接在css样式里面加上

 .father:after{
    
    
        content:'';
        display:block;
        clear:both;
  }

小结

1.设置父元素的高度, 简单，元素假设有了固定的高度，就会被限制
2.浮动元素后面增加空div, 简单，代码中尽量避免空div
3.overflow ,简单，下拉的一些场景(或不能被切除的场景)避免使用
4.父类添加一个伪类：after（推荐，没有副作用）

display和float的对比

相同：display和float相同的作用：可以让元素排在一列

不同：display不可控制方向，但不会出现父级边框塌陷的问题

float可控制方向，但浮动起来会脱离标准文档流，所以要解决父级文档塌陷问题

CSS——display和浮动以及解决浮动中父级边框塌陷的问题