几种常见CSS布局

原作者催吐吧：咖啡链接：zhuanlan.zhihu/p/53065580来源：知乎著作权归作美术生高考分数怎么算者所有。商业转载请联系作者获得授权，非商业转载请注明出处。布局1、浮动布局float属性（float:left/right;）使用float需要为其父元素添加clearfix（class类名），然后再给相应元素添加浮动属性，否则会出现其父元素高度坍塌无法被撑开的现象。/*clearfix格式*/ 电视机哪个品牌好.clearfix:after{content: '';display: block;数据化营销clear: both;}给需要浮动的元素添加float属性，就可以将其浮动到其父元素内的左或右边，需要注意的是，添加浮动属性的元素是从当前文档流位置开始脱ace联盟离文档流进行左右浮动的。如下图，给黑色添加向右的浮动，可以看出是从红元素下方开始进行浮动的。

黑色添加右浮动

如需要将黑色浮动与红色右边而不是右下，需要将黑色div移到红色上方

当黑色高度大于红色高度时，做右浮动会将txupd父元网络营销的特点素高度撑开，如下图黑色高度大于红色当黑色高度小于红色时，内联元素定位时会考虑浮动元素的边界从而绕开。黑色高度小于红色

如果不为其父元素添加clearfix（cla高清图库ss类名），高度不固定且低于浮动元素时，会有其他效果，比如下方有页脚。如下图

黑色超出父元素覆盖绿色

在绿色div添加clear属性

绿色添加clear属性

浮动定位有一个很大的缺点：我们必须把需要浮动的元素的整个div往上提一千万富豪个位置，比如：有一则广告浮动在主内容的右侧，这时候需要将广告的整个元素提到主内容上方。所以当这个顺序要反映页面的相对重要性的时候，这个紫水晶饰品选择不是最优的。还有一个潜在的缺点，就是要么固定height，要么跟父元素相等（height:100%）。2、位置布局position网站不收录属性（position:孔令学static/fixed/absolute/relative;）

默认值是静态（static）相对（relative）定位是让元素正常地流入页面，不过在页面上显示之前要进行偏移（高宽计算在流当中，显示进行偏移）。村里那些事黑色使用相对（pcurelative）定位绝对（ab车身划痕损失险solute）定位是将元素从流中完全删除，使用top和rigth（或bottom和right）指定位置，参照对象是“离它最近的已定位股票大盘点数的祖先元素”；绝对定位元素没有指定元素，默认的，块元素会占浏览器的整个宽度；流元素并不知道绝对定位元素的存在，所以流元素中的内联元素内容不会中国四大古都围绕着绝对定位元素。给要移动的元素添加绝对定位属性，建议给其父元素添加相对定位属性。效果如下图。黑色使用（absolute）定位固定（fixed）定位是老友记剧本将元素放在相对于浏览器窗口的一个位置上（而不是相对于页面）。绿色使用固定（fixed）定位

3、表格显示布局display属性（display:table/grid）使用CSS中的table值进行布局其实也可以用HTML中的table标签实现。

使用table值，还需要使用以下几个：

display:table-r刘海造型ow（行）、table-匈牙利事件cell（列）

使用table布局

既是优点也是缺点：不给高宽，会根据列内容及窗口进行高宽自适应；给高度不给宽度，列会根据内容自适应宽度；给宽度不给高度，列会自适应最高的高度

grid属性为新添加属性

可参考MDN：