web前端开发教程视频，JavaScript的算数运算符与比较运算符

最新推荐文章于 2022-04-26 16:29:13 发布

前端小猫咪

最新推荐文章于 2022-04-26 16:29:13 发布

阅读量58

点赞数

分类专栏：程序员文章标签：面试前端大前端

本文链接：https://blog.csdn.net/m0_60125134/article/details/119002198

版权

程序员专栏收录该内容

38 篇文章 1 订阅

订阅专栏

网页布局要求，标准流不能满足我们的需要了，因此我们需要浮动来完成网页布局。

认识浮动

选择器{
float:属性值;
}

属性值：

none(没有)
left(左浮动)
right(右浮动)

浮动的特点
1）脱离标准流，不占位置（自己原来的位置漏给后面的标流）
2）浮动的元素一排显示，如果父亲装不下了，默认另起一行显示。浮动的元素之间默认无缝隙。
3）任何元素都可以添加浮动，无论它是块元素还是行内元素，浮动后可以直接设置宽高，默认类似于行内块特性，不需要display转换。

浮动与兄弟盒子的关系
标准流–占有位置浮动— 不占位置(脱标)
浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。

浮动元素与父盒子的关系

浮动的元素压不住父亲的边框
浮动的元素压不过父亲的padding
后面学的定位可以随便压

浮动的简单应用

（1）让多个块级元素水平排列在一行（这里将行内元素转换为了块级元素）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
.myclass1{
background-color: red;
width: 100px;
height: 200px;
display:inline-block;
}
.myclass2{
background-color:black;
width: 100px;
height: 200px;
display:inline-block;
}
.myclass3{
background-color: red;
width: 100px;
height: 200px;
display:inline-block;
}
</style>
</head>
<body>
     <span class="myclass1">1</span>
     <span class="myclass2">2</span>
     <span class="myclass3">3</span>
</body>
</html>

（2）添加浮动

<style type="text/css">
.myclass1{
      background-color: red;
      width: 100px;
      height: 200px;
      display:inline-block;
      float: left;
}        
.myclass2{
        background-color:black;
        width: 100px;
        height: 200px;
        display:inline-block;
        float: left;
}
.myclass3{
        background-color: red;
        width: 100px;
        height: 200px;
        display:inline-block;
        float: left;
}
</style>

（3）一个左，一个右

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
.myclass1{
background-color: red;
width: 100px;
height: 200px;
display:inline-block;
float: left;
}
.myclass2{
background-color:black;
width: 100px;
height: 200px;
display:inline-block;
float: right;
}
</style>
</head>
<body>
    <div class="myclass1"></div>
    <div class="myclass2"></div>
</body>
</html>

清除浮动

清除浮动不是真的把浮动清除，而是清除加了浮动带给后面的标流的影响。
如果子盒子是标流，因为标流占有位置，所以父亲能检测到高度。
子盒子浮动了，不占有位置，又因为父亲高度为零；所以父亲检测不到高度。

1）额外标签法
在最后一个加了浮动元素的末尾添加一个块级别的空标签。

<div style="clear:both;"></div> 
--- 这个空标签一定是块元素.

缺点：结构容易乱。

2）给浮动元素的父亲添加overflow属性方法
overflow:hidden;
缺点：内容增多的时候导致内容被剪贴掉，无法显示需要溢出的内容。

3）after伪元素清除浮动

.clearfix:after {
/* 使用伪元素必须添加content属性 */
content: "";
/* 因为伪元素是行内元素，所以需要转换成块元素 */
display: block;
/* 兼容 */
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 专有  */
*zoom: 1;
}

4）双伪元素清除浮动(推荐)

.clearfix::before,
.clearfix::after {
/* 要想使用伪元素，必须写上content属性 */
content: "";
/* 这里写成block也是没有问题的，为什么使用table,这是老的写法，兼容老版本浏览器 */
display: table;
} 
.clearfix::after {
clear: both;
} 
.clearfix {
*zoom: 1;
}

什么时候清除浮动？

父亲没有高度。
子盒子又浮动。
因为浮动影响了后面的布局。

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦，如果有需要前端校招面试题PDF完整版的朋友可以点击这里即可免费获取，包括答案解析。

高度。

子盒子又浮动。
因为浮动影响了后面的布局。

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦，如果有需要前端校招面试题PDF完整版的朋友可以点击这里即可免费获取，包括答案解析。

[外链图片转存中…(img-tUUiBvVp-1626941814356)]

前端小猫咪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端开发教程视频，JavaScript的算数运算符与比较运算符

网页布局要求，标准流不能满足我们的需要了，因此我们需要浮动来完成网页布局。认识浮动选择器{float:属性值;} 属性值：none(没有)left(左浮动)right(右浮动)浮动的特点1）脱离标准流，不占位置（自己原来的位置漏给后面的标流）2）浮动的元素一排显示，如果父亲装不下了，默认另起一行显示。浮动的元素之间默认无缝隙。3）任何元素都可以添加浮动，无论它是块元素还是行内元素，浮动后可以直接设置宽高，默认类似于行内块特性，不需要display转换。浮动与兄弟盒子的关系标
复制链接

扫一扫