html前端部分知识-2019年9月4日20时

问题一：实例演示如何消除子元素浮动造成父元素高度折叠的影响

答：在父元素中添加“overflow:hidden”即可消除子元素浮动对父元素高度折叠的影响

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>消除子元素浮动对父元素高度折叠的影响实例</title>
<style>
.one{
     width:300px;
     border:2px dashed red;
	 /*使用overflow来消除子元素浮动对父元素高度折叠的影响*/
	 overflow:hidden;
}

.two {
     width:inherit;
     height:296px;
	 float:left;
	 background:pink;
}
</style>
</head>
<body>
<div class="one">
<div class="two">子元素</div>
</div>
</body>
</html>

运行实例 »

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

问题二：实例演示三列布局的实现原理( 绝对定位实现, 浮动定位实现)

答：

绝对定位实现三列布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>利用绝对定位实现3列布局</title>
<style>
.header{
     width:100%;
     height:60px;
	 text-align:center;
	 line-height:60px;
	 font-size:12px;
	 background:gray;
	 margin-bottom:5px;
}

.nav{
     width:100%;
     height:30px;
	 text-align:center;
	 line-height:30px;
	 font-size:12px;
	 background:pink;
	 margin-bottom:5px;
}

.main{
     width:100%;
	 position:relative;
	 margin-bottom:5px;
}

.left {
     width:30%;
	 height:300px;
	 background:lightgreen;
	 text-align:center;
	 line-height:300px;
}

.content {
     width:50%;
	 height:300px;
	 background:lightblue;
	 text-align:center;
	 line-height:300px;
}

.right {
     width:20%;
	 height:300px;
	 background:lightgreen;
	 text-align:center;
	 line-height:300px;
}

/*绝对定位实现三列排序*/

.left {
     position:absolute;
	 left:0;
	 top:0;
}

.right {
     position:absolute;
	 left:80%;
	 top:0;
}

.content {
     margin-left:30%;
	 margin-right:20%;
}

.footer{
     width:100%;
     height:60px;
	 text-align:center;
	 line-height:60px;
	 font-size:12px;
	 background:gray;
}
</style>
</head>
<body>
<div class="header">头部</div>
<div class="nav">导航</div>
<div class="main">
    <div class="left">左侧</div>
    <div class="content">内容</div>
    <div class="right">右侧</div>
</div>
<div class="footer">底部</div>
</div>
</body>
</html>

运行实例 »

浮动定位实现三列布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>利用浮动实现3列布局</title>
<style>
.header{
     width:100%;
     height:60px;
	 text-align:center;
	 line-height:60px;
	 font-size:12px;
	 background:gray;
	 margin-bottom:5px;
}

.nav{
     width:100%;
     height:30px;
	 text-align:center;
	 line-height:30px;
	 font-size:12px;
	 background:pink;
	 margin-bottom:5px;
}

.main{
     width:100%;
	 position:relative;
	 margin-bottom:5px;
	 overflow:hidden;
}

.left {
     width:30%;
	 height:300px;
	 background:lightgreen;
	 text-align:center;
	 line-height:300px;
}

.content {
     width:40%;
	 height:300px;
	 background:lightblue;
	 text-align:center;
	 line-height:300px;
}

.right {
     width:30%;
	 height:300px;
	 background:lightgreen;
	 text-align:center;
	 line-height:300px;
}

/*利用浮动实现三列排序*/

.left {
     float:left;
}

.right {
     
     float:right;
}

.content {
     float:left;
}

.footer{
     width:100%;
     height:60px;
	 text-align:center;
	 line-height:60px;
	 font-size:12px;
	 background:gray;
}
</style>
</head>
<body>
<div class="header">头部</div>
<div class="nav">导航</div>
<div class="main">
    <div class="left">左侧30%</div>
    <div class="content">内容40%</div>
    <div class="right">右侧30%</div>
</div>
<div class="footer">底部</div>
</div>
</body>
</html>

运行实例 »

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

总结：

如果要消除子元素浮动造成父元素高度折叠的影响，方法很简单，只要在父元素里加上“overflow:hidden”,即可。
利用绝对定位实现3列布局时，首先对父元素设置一个relative定位，然后根据对左右两侧分别使用absolute定位，最后对中间列用margin属性挤出即可。
利用浮动实现3列布局时，首先对父元素设置一个“overflow:hidden”,以消除子元素浮动对父元素高度折叠的影响，然后左右两侧分别设置float:left;float:right,中间列则不管是用哪种float都可以。

实例

相关文章