文档流与浮动
Posted lijianming180
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了文档流与浮动相关的知识，希望对你有一定的参考价值。
文档流指的是元素排版时，会自动从左往右，从上往下的流式排列方式。
元素分为两类
默认独占一行，不能与其他元素并列，可以容纳内联元素和其他块元素，可以设置高和宽，如果不设置宽，则默认设置宽度为父级的100%
如：div dl dt dd h1~h6 ul li ol tr td hr p pre等
（2）行内元素
和其他元素都在一行上，宽高及外边距和内边距不可改变，宽度就是它的文字或图片的宽度，内联元素只能容纳文本或者其他内联元素，行内元素可以由line-height设置行高设置margin 只有左右margin有效，上下无效。设置padding 只有左右padding有效，上下则无效。
如：a span button b big img input em等
块级元素和行内元素可以相互转换
通过display属性进行设置，display是显示模式，用来改变元素的行内、块级性质。
2.浮动
即float，可设置左浮动left和右浮动right。
元素设置浮动以后，会完全脱离文档流，并向页面的左上或右上浮动。直到遇到父元素的边框或其他的父元素时则停止浮动。元素浮动后可能会出现围字现象，或者原本标准流的内容被遮挡住。
浮动带来的问题
大专栏 文档流与浮动7%88%B6%E5%85%83%E7%B4%A0%E9%AB%98%E5%BA%A6%E5%A1%8C%E9%99%B7" class="headerlink" title="父元素高度塌陷">父元素高度塌陷
在文档流中元素的高度默认被子元素撑开，当子元素浮动时，子元素会脱离文档流，此时将不能撑起父元素的高度，会导致父元素的高度塌陷。从而导致其他元素的位置上移，页面布局混乱。
解决办法
（1）给父元素设置height
（2）父元素添加伪类清楚浮动
1 | :after{display:block;clear:both;content:"";visibility:hidden;height:0} |
（3）给父元素添加
1 | overflow：hidden/auto; |
（4）让父元素也浮动
以上是关于文档流与浮动的主要内容，如果未能解决你的问题，请参考以下文章
CSS文档流与块级元素（block）内联元素（inline）