CSS浮动元素与元素溢出解决

CSS浮动元素与元素溢出解决

---

---

前言

做项目时,遇到个css样式问题,今天来回顾记录一下css中的浮动元素

---

一、标准文档流

标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式

标准文档流组成
块级元素（block）
<h1>…<h6>、<p>、<div>
列表 内联元素（inline）
<span>、<a>、<img/>、<strong>…

内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立

二、display属性

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

示例: