Document

【CSS 09】溢出 overflow属性控制浮动 float属性设置清除浮动 clear属性指定解决浮动导致的溢出问题 clearfix类的CSS设置 overflow 伪元素

2023-06-15
dfer
504
css css3 html

CSS

说在前面

最近学习固体物理，信息论以及编码原理学的有点烦
虽然也挺有意思的，但是一直让我学也是很难受的
赶紧来进行CSS的巩固比较nice

溢出 overflow

CSS overflow 属性控制对太大而区域无法容纳的内容的处理方式

<!DOCTYPE html>
<html>
<head>
<style>
#overflowTest {
	background-color: #4CAF50;
	color: white;
	padding: 15px;
	width: 50%;
	height: 100px;
	overflow: scroll;
	border: 1px solid hotpink;
}
</style>
</head>
<body>

<h1>CSS 溢出</h1>
<p>overflow属性控制当内容过大导致区域无法容纳的情况</p>
<div id="overflowTest">This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai! The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.</div>
</body>
</html>

overflow 属性指定在元素内容过大而无法放入指定区域后是剪裁内容还是添加滚动条

overflow 属性可以设置如下的值：

visible - 默认，溢出在元素框外渲染
hidden - 溢出裁剪
scroll - 添加滚动条，但是将在水平和垂直方向上都添加
auto - 与scroll类型，并且只在必要时添加滚动条
overflow 属性只适用于拥有指定高度的块元素

同时我们还可以使用

overflow-x 指定如何处理内容的左右边缘
overflow-y 指定如何处理内容的上下边缘（滚动条通常在右侧）

浮动 float

CSS float 属性规定元素如何浮动
CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动

float 属性用于定位和格式化内容
可以设置下面的值：

left - 元素浮动到容器的左侧
right - 元素浮动到容器的右侧
none - 元素不发生浮动 - 默认显示在文本中刚出现的位置
inherit - 元素继承父级的float值

最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果

<!DOCTYPE>
<html>
<head>
<style>
img {
	float: right;
}
</style>
</head>
<body>

<h1>右浮动</h1>

<p>在本例中，图像会在段落中向右浮动，而段落中的文本会包围这幅图像。</p>

<p><img src="/i/logo/w3logo-3.png" alt="W3School" style="width:170px;height:170px;margin-left:15px;">领先的 Web 技术教程 - 全部免费。在 W3School，你可以找到你所需要的所有的网站建设教程。从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP
我们的参考手册涵盖了网站技术的方方面面。其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。
在 W3School，我们提供上千个实例。通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验
</p>

</body>
</html>

更多关于CSS浮动

clear 与 clearfix

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧
可以设置以下值：

none - 允许两侧都有浮动元素 - 默认
left - 左侧不允许浮动元素
right - 右侧不允许浮动元素
both - 左右都不允许浮动元素
inherit - 元素继承父级的clear值
使用 clear 属性的最常见用法是在元素上使用了 float 属性之后
在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧
您的浮动元素会继续浮动，但是被清除的元素将显示在其下方

<!DOCTYPE>
<html>
<head>
<style>
.div1 {
	float: left;
	width: 50%;
	height: 50px;
	margin: 10px;
	border: 3px dashed green;
}

.div2 {
	border: 4px groove hotpink;
}

.div3 {
	float: left;
	width: 50px;
	height: 10px;
	margin: 20px;
	border: 3px dotted hsla(120,100%,70%,80%)
}

.div4 {
	border: 4px ridge hotpink;
	clear: left;
}
</style>
</head>
<body>

<h1>未使用clear</h1>

<div class="div1">div1</div>

<div class="div2">注意在 HTML 代码中 div2 在 div1 之后<br/>
不过，由于 div1 向左浮动，div2 中的文本会流动到 div1 周围</div>

<h1>使用clear</h1>

<div class="div3">div3</div>
<div class="div4">在此处clear: left; 把 div4 移动到浮动的 div3 下方。值 "left" 会清除向左浮动的元素<br/>
您也可以清除 "right" 和 "both"</div>

</body>
</html>

如果一个元素比包含它的元素高，并且是浮动的，将溢出到其容器之外
可以向包含元素添加 overflow: auto;来解决此问题

<!DOCTYPE html>
<html>
<head>
<style>
div {
	border: 3px dotted #AAFFFF;
	padding: 10px;
}

.img1 {
	float: right;
}

.clearfix {
	overflow: auto;
}

.img2 {
	float: right;
}
</style>
</head>
<body>

<h1>Clearfix</h1>

<p>图像高于包含其的元素，并且图像浮动，将在容器外溢出</p>

<div>
	<img class="img1" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="160">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>

<p style="clear:right">为包含元素添加带有overflow: auto;的clearfix类，解决溢出问题</p>

<div class="clearfix">
	<img class="img2" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="160">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>

</body>
</html>

只要您能够控制外边距和内边距（否则您可能会看到滚动条），overflow: auto clearfix 就会很好地工作
但是新的现代 clearfix hack 技术使用起来更安全，以下代码被应用于多数网站：

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}
/*其中::after是伪元素*/

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.img2 {
  float: right;
}
</style>
</head>
<body>

<p>在本例中，图像高于包含它的元素，然而它被浮动了，所以它会在容器之外溢出：</p>

<div>
  <h1>Without Clearfix</h1>
  <img class="img1" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>

<p style="clear:right">请为包含元素添加 clearfix hack，以解决此问题：</p>

<div class="clearfix">
  <h1>With Clearfix</h1>
  <img class="img2" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>

</body>
</html>

上一篇： wangEditor

下一篇： HTML基础大全