简述html 布局的原理,css布局原理与实现-2019年9月4日20时

1、实例演示如何消除子元素浮动造成父元素高度折叠的影响。

实例

html>

浮动

.box1 {

width: 250px;

border: 5px dashed rebeccapurple;

overflow: hidden;

}

.box2 {

width: inherit;

height: 300px;

background-color: lawngreen;

float: left;

}

运行实例 »

点击 "运行实例" 按钮查看在线实例

2、 实例演示三列布局的实现原理( 绝对定位实现, 浮动定位实现)。

实例

html>

Document

.box1 {

width: 300px;

height: 600px;

background-color: lawngreen;

}

.box2 {

width: 300px;

height: 600px;

background-color: lightcoral;

position: relative;

left: 300px;

top: -600px;

}

.box3 {

width: 300px;

height: 600px;

background-color: lightblue;

position: relative;

left: 600px;

top: -1200px;

}

运行实例 »

点击 "运行实例" 按钮查看在线实例