主要知识点：
1、浮动：让元素脱离标准流，从而实现灵活的布局效果。
2、浮动只能左右，不能上下。float:left/right/none。
3、子元素浮动会造成父元素高度塌陷，清除浮动的3种方法：
- 方法1：通过overflow属性
- 方法2：通过clear属性
- 方法3：通过伪元素选择器（推荐）
效果图：
参考：
<header>
<img src="img/2.jpg"/>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Course</a></li>
<li><a href="#">Actual</a></li>
<li><a href="#">Plan</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Notes</a></li>
</ul>
</nav>
</header>
<header>
<img src="img/2.jpg"/>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Course</a></li>
<li><a href="#">Actual</a></li>
<li><a href="#">Plan</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Notes</a></li>
</ul>
</nav>
</header>
<header>
<img src="img/2.jpg"/>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Course</a></li>
<li><a href="#">Actual</a></li>
<li><a href="#">Plan</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Notes</a></li>
</ul>
</nav>
</header>
CSS:
header::after{content: ""; display: block; clear: both;} /*清除浮动*/
header img{margin-left: 50px; margin-top: 2px; float: left;}
header nav{float: right; margin-right: 50px; margin-top: 5px;}
header::after{content: ""; display: block; clear: both;} /*清除浮动*/
header img{margin-left: 50px; margin-top: 2px; float: left;}
header nav{float: right; margin-right: 50px; margin-top: 5px;}
header::after{content: ""; display: block; clear: both;} /*清除浮动*/
header img{margin-left: 50px; margin-top: 2px; float: left;}
header nav{float: right; margin-right: 50px; margin-top: 5px;}
本文来自投稿，不代表125jz立场，如若转载，请注明出处：http://www.125jz.com/5533.html
微信扫一扫 
支付宝扫一扫 
