浮动与清除浮动：解决网页布局问题-优快云博客

本文链接：https://blog.youkuaiyun.com/Matutinal/article/details/119349856

7月13知识回顾

1.浮动：让竖着的东西横过来，一行排列多个元素。

名词	释义	出现问题
标准流	网页的正常排版顺序，竖向排列。	元素嵌套元素的情况下，当给子元素设置了margin-top后，浏览器在解析的时候会误认为给容器设置的所以会出现整体往下掉的情况
浮动流	设置了float属性后，脱离标准流，元素浮动	高度塌陷和高度塌陷引起的元素重叠问题

条件	出现问题	解决办法
标准流：元素嵌套元素的情况下	当给子元素设置了margin-top后，浏览器在解析的时候会误认为给容器设置的所以会出现整体往下掉的情况	1 直接给容器设置overflow:hidden; 2 如果子元素或者父元素设置了浮动属性也不会出现问题
浮动流	高度塌陷和高度塌陷引起的元素重叠问题	清除浮动(解决分案如下)

2.为什么清除浮动

清除浮动并不是把设置的浮动直接删除，而是清除浮动给咱们带来的负面影响。
负面影响：高度塌陷和高度塌陷引起的元素重叠问题。
高度塌陷：在实际的开发中容器的高度要求自适应，当容器没有设置高度的时候子元素设置了浮动会引起高度失效（塌陷），把这种现象称之为高度塌陷问题

3. 清除浮动的三种方式：

设置位置	方法
同级添加空盒子	给空盒子设置类: .clear{clear:both;}
父级	父类添加： .clear{overflow:hidden;}
父级	父类添加：.clear:after{ display:block; clear:both; content:””; visibility:hidden; Height:0 } .clear{zoom:1;}

4. css框的概念：

所有 HTML 元素都可以视为方框，CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。

属性	释义	属性值
display	规定元素应该生成的框的类型	inline、block、inlin-block、none

5. 置换元素和非置换元素：

名词	释义	标签
置换元素	浏览器根据元素的标签和属性，来决定元素的具体显示内容。	img, input, textarea, select, object 等
非置换元素	除开置换元素的其他元素，其内容直接展示给浏览器	除开上面的其他元素

6 .实现省略号的步骤：

方法：

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 500px;
				margin: 0 auto;
				height: 100px;
				border: 2px solid;
			}
			div p{
				/*强制不换行*/
				white-space: nowrap;
				/* 溢出隐藏 */
				overflow: hidden;
				/* 文本溢出时显示省略号 */
				text-overflow: ellipsis;
			}
		</style>
	</head>
	<body>
		<div >
			<p>今天的天气格外美丽，心情也格外美丽呢！今天的天气格外美丽，心情也格外美丽呢！</p>
		</div>
	</body>