CSS浮动（display、float、边框塌陷、溢出处理）

最新推荐文章于 2023-05-31 16:28:30 发布

Marvellous丶

最新推荐文章于 2023-05-31 16:28:30 发布

阅读量2.5k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/baolingye/article/details/92837152

版权

前端专栏收录该内容

12 篇文章 5 订阅

订阅专栏

CSS浮动

一、标准文档流

标准文档流指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式，浮动一般用于图片，也可用于页面布局
标准文档流的组成
- u块级元素（block）
  - h1~h6 、p 、 div 、列表
- 内联元素（inline）
  - span 、 a 、 img 、 strong
内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立

二、display属性

block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block 行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none 设置元素不会被显示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Title</title>
<style>
p {display:inline}
p[class=a]{display:none}
</style>
</head>
<body>

<p>这两个段落生成内联盒子,和它的结果</p>

<p>这两个元素之间没有距离。</p>
	
<p class="a">这也是一个ps标签</p>

</body>
</html>

运行结果：
在这里插入图片描述

二、块元素排在一行的方法

可以使用什么属性使块元素排在一行？

display的inline-block 属性
float属性

三、浮动（float）

left 元素向左浮动
right 元素向右浮动
none 默认值。元素不浮动，并会显示在其文本中出现的位置

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Title</title>
<style>
img 
{
	float:right;
}
</style>
</head>

<body>
<p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img src="logocss.gif" width="95" height="84" />
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>

</html>

运行结果：
在这里插入图片描述

四、边框塌陷

浮动元素脱离标准文档流
清除浮动
clear属性
- left 在左侧不允许浮动元素
- right 在右侧不允许浮动元素
- both 在左、右两侧不允许浮动元素
- none 默认值。允许浮动元素出现在两侧

<html>

<head>
<style type="text/css">
img
  {
  float:left;
  clear:both;
  }
</style>
</head>

<body>
<img src="/i/eg_smile.gif" />
<img src="/i/eg_smile.gif" />
</body>

</html>

运行结果：
在这里插入图片描述

五、溢出处理

Overflow属性

visible 默认值。内容不会被修剪，会呈现在盒子之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Title</title> 
<style>
div.ex1 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: scroll;
}

div.ex2 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: hidden;
}

div.ex3 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: auto;
}

div.ex4 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: visible;
}
</style>
</head>
<body>
<h1>overflow 属性</h1>

<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>

<h2>overflow: scroll:</h2>
<div class="ex1">西安源代码软件技术服务有限公司下属的西部开源技术中心，座落于西部历史文化名城西安，是由一群热爱开源技术，热衷于Linux 技术推广的有志青年共同发起组织成立的西部首家公共服务机构。中心以推动Linux在西部的发展为目标，为西安、西部地区乃至全国电子商务与信息化建设提供Linux 技术支持服务。</div>

<h2>overflow: hidden:</h2>
<div class="ex2">西安源代码软件技术服务有限公司下属的西部开源技术中心，座落于西部历史文化名城西安，是由一群热爱开源技术，热衷于Linux 技术推广的有志青年共同发起组织成立的西部首家公共服务机构。中心以推动Linux在西部的发展为目标，为西安、西部地区乃至全国电子商务与信息化建设提供Linux 技术支持服务。</div>

<h2>overflow: auto:</h2>
<div class="ex3">西安源代码软件技术服务有限公司下属的西部开源技术中心，座落于西部历史文化名城西安，是由一群热爱开源技术，热衷于Linux 技术推广的有志青年共同发起组织成立的西部首家公共服务机构。中心以推动Linux在西部的发展为目标，为西安、西部地区乃至全国电子商务与信息化建设提供Linux 技术支持服务。</div>

<h2>overflow: visible (默认):</h2>
<div class="ex4">西安源代码软件技术服务有限公司下属的西部开源技术中心，座落于西部历史文化名城西安，是由一群热爱开源技术，热衷于Linux 技术推广的有志青年共同发起组织成立的西部首家公共服务机构。中心以推动Linux在西部的发展为目标，为西安、西部地区乃至全国电子商务与信息化建设提供Linux 技术支持服务。</div>

</body>
</html>

运行结果：
在这里插入图片描述

六、解决父级边框塌陷的方法

浮动元素后面加空div

简单，空div会造成HTML代码冗余
设置父元素的高度

简单，元素固定高会降低扩展性
父级添加overflow属性

简单，下拉列表框的场景不能用
父级添加伪类after

写法比上面稍微复杂一点，但是没有副作用，推荐使用

七、inline-block和float的区别

display:inline-block
- 可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
- 位置方向不可控制，会解析空格
- IE 6、IE 7上不支持
float
- 可以让元素排在一行并且支持宽度和高度，可以决定排列方向
- float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式

Marvellous丶

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS浮动（display、float、边框塌陷、溢出处理）

CSS浮动一、标准文档流标准文档流指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式，浮动一般用于图片，也可用于页面布局标准文档流的组成u块级元素（block）h1~h6 、p 、 div 、列表内联元素（inline）span 、 a 、 img 、 strong内联标签可以包含于块级标签中，成为它的子元...
复制链接

扫一扫