HTML CSS整理笔记 (七) 浮动

完成笔记链接：https://www.niwoxuexi.com/blog/web/article/1245

——7 浮动——

44.标准文档流：元素根据块元素或行内元素的特性从上到下，从左到右的方式自然排列。

45.display属性：用于指定标签的显示方式

• block：块元素的默认值，该元素前后自带换行符
• inline：行内元素的默认值，元素会显示为行内元素
• inline-block：行内块元素，兼具行内元素和块元素的特性
• none：元素不会显示

46.Float：指定网页元素向哪个方向浮动

• left左、right右、none默认无(元素不浮动 显示在其文本出现的位置)
• 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
• 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
• 浮动元素之后的元素将围绕它。
• 浮动元素之前的元素将不会受到影响。
• 如果是右浮动，后面的文本流将环绕在它左边：

47.clear清除浮动：当子元素全部浮动了，父级将包不住子元素会造成边框塌陷，所以要清除浮动元素对其他元素的影响。

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

• left(左侧不允许浮动元素)、right(右侧不允许)、
• both(左右都不允许，常用于文本在图片下方显示)、
• none(允许浮动元素出现在两侧)

49.解决父级边框塌陷

(1)浮动元素后加空的div，该div样式要设置clear:both;margin:0px;padding:0px;

(2)设置父元素固定高度把边框撑开。

(3)父级添加overflow属性:设置外层盒子的overflow:hidden。但此方法不能用于有下拉列表框的场景。

(4)父级添加伪类after，推荐。

50.Overflow属性：溢出处理，也可用于扩展盒子高度。

1) visible 默认溢出内容可见，显示在盒子外面

2) hidden 多出来的内容被隐藏且没有滚动条

3) scroll 有垂直水平2条滚动条，可查看多余内容

4) auto 如果内容溢出，自动显示滚动条(只有垂直条)查看

5) inherit 继承父特性

HTML CSS整理笔记更多笔记

HTML CSS整理笔记（一）HTML5基础

HTML CSS整理笔记（二）列表、表格、媒体元素

HTML CSS整理笔记 （三）表单

HTML CSS整理笔记（四）CSS3基础

HTML CSS整理笔记(五) CSS3美化网页

HTML CSS整理笔记（六）盒子模型

HTML CSS整理笔记 (七) 浮动

HTML CSS整理笔记 (八) 定位网页元素

HTML CSS整理笔记 (九) CSS3做网页动画

HTML CSS整理笔记 （十）HTML部分