<!– 设置一个div占用屏幕左侧的百分20，一个div占屏幕右侧的百分之80 –>
<div class="c1"></div>
<div class="c2"></div>

</body>
</html>


![](https://s2.51cto.com/images/20210924/1632458736228254.jpg)

2.清除浮动clear属性

![](https://s2.51cto.com/images/20210924/1632458737285298.jpg)

![](https://s2.51cto.com/images/20210924/1632458737820729.jpg)

?（1）利用伪元素具有clear清除浮动的属性来解决父标签塌陷的问题（父标签撑不起来的问题）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>11清除浮动示例</title>

<style>
    /* 通用样式将整个浏览器的外边距与内边距设置为0 */ * { margin: 0; padding: 0;
    } #d1 { border: 1px solid black;
    } .c1,
    .c2 { float: left;    /* 左浮动 */ height: 100px;
    }

    /*.c3 {*/
        /*!*height: 100px;*!*/
        /*clear: left;*/
    /*}*/

    /* 在d1这个标签的最后加一个伪元素,伪元素的内容为空，但具有清除浮动的属性，解决了父标签塌陷问题*/ #d1:after { content: ""; clear: left; display: block;
    }
</style>

</head>
<body>

<div id="d1">
<div class="c1">c1</div>
<div class="c2">c2</div>
</div>

</body>
</html>


?![](https://s2.51cto.com/images/20210924/1632458737479745.jpg)

3.overflow溢出属性

![](https://s2.51cto.com/images/20210924/1632458738344554.jpg)

?![](https://s2.51cto.com/images/20210924/1632458738357616.jpg)

（1）利用overflow溢出属性做圆形头像的例子

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>12overflow示例</title>
<style> .c1 { width: 120px; height: 120px; border: 1px solid black;
/overflow: scroll; ! 当内容溢出时，则会使用滚动条，防止内容溢出 !/ overflow: auto; / 同样是增加了滚动条来防止溢出/
}
/ 使头像变成圆形的例子 / .header-img { width: 120px; height: 120px; border: 2px solid #FF0000; border-radius: 100%; / 圆形边框 / overflow: hidden; / 如果内容溢出了则隐藏掉溢出的部分 /
} img { max-width: 100%; / 设置图片的最大宽度为100%，也就是和父标签一样大 /
}
</style>

</head>
<body>
<!– 由于文本内容过多，文本内容超过了父标签的长和高，则发生内容了溢出 –>
<div class="c1">嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</div>

文末

js前端的重头戏，值得花大部分时间学习。

JavaScript知识

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

前端电子书

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题

288页面试题