标签：str   页面布局   伪类   块元素   塌陷   figure   hub   ref   float   

文档流指的是元素排版时，会自动从左往右，从上往下的流式排列方式。

元素分为两类

默认独占一行，不能与其他元素并列，可以容纳内联元素和其他块元素，可以设置高和宽，如果不设置宽，则默认设置宽度为父级的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）让父元素也浮动

文档流与浮动

标签：str   页面布局   伪类   块元素   塌陷   figure   hub   ref   float   

原文地址：https://www.cnblogs.com/lijianming180/p/12014188.html