>### float
~~~
目的：为了让元素并排显示
~~~
#### 1.子元素float，父元素的高度会坍塌
#### 2.如何清除float
(1)给下面的兄弟元素给clear:both;
(2)给父级加overflow:hidden;
~~~
.parent{
width:200px;
background: red;
overflow: hidden;
}
.child{
width:50px;
height:50px;
background: blue;
float: left;
}
~~~
~~~
<style>
/* 如何让下面元素不受上面浮动元素的影响
1.clear:both;
2.给float元素父元素设置overflow:hidden
*/
.parent>div {
width: 100px;
height: 100px;
float: left;
}
.one {
background: red;
}
.two {
background: blue;
}
.three {
background: pink;
}
.four {
width: 200px;
height: 200px;
background: gray;
/* 清除float
clear: both; */
}
.parent{
overflow: hidden;
}
</style>
</head>
<body>
<!--
float目的 让元素并排显示
-->
<div class="parent">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<p class="four"></p>
</body>
~~~
demo实现导航
~~~
<style>
*{margin:0;padding:0}
.nav{
overflow: hidden;
line-height: 50px;
background: pink;
}
a{
display: block;
float: left;
text-decoration: none;
width: 100px;
text-align: center;
color: #fff;
}
a:hover{
color: green;
border-bottom: 2px solid blue;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">手机</a>
<a href="#">平板</a>
<a href="#">电脑</a>
</div>
</body>
</html>
~~~
内联块也可以实现导航，但是有缺点，不推荐使用
~~~
<style>
*{margin:0;padding:0}
.nav{
line-height: 50px;
background: pink;
}
a{
display:inline;
text-decoration: none;
width: 100px;
text-align: center;
color: #fff;
}
a:hover{
color: green;
border-bottom: 2px solid blue;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">手机</a>
<a href="#">平板</a>
<a href="#">电脑</a>
</div>
</body>
~~~
- html-css
- 第一节 外部样式表
- 第二节 元素选择器
- 第三章 盒子模型
- 第四章 html标签的分类
- 第五章 css选择器
- 第六章 权重
- 第七章 css基本样式
- 第一节 背景
- 第二节 文本
- 第三节 字体
- 第四节 链接
- 第五节 列表（针对ul）
- 第六节 边框
- 第七节 简单表格
- 第八节 nvvm
- 第九节 跨越列的表格
- 第十节 跨越行的表格
- 第十一节 有间隔的表格
- 第十二节 opacity透明度
- 第八章 css样式的继承
- 进阶教程
- 1.flex教程
- flex补充1
- flex补充2
- 2.grid布局
- css
- 第一节 box-sizing
- 第二节 float
- 第三节 position
- 第四节 导航栏
- iconfont的使用
- 第五节 搜索功能的实现