前端小白对CSS浮动与清除浮动学习总结

学习心得:

        博主我对于网页前端的制作几乎是一个新手小白,我相信一定也有许多想学网页前端的朋友和我一样既充满了顾虑又觉得在学习前无从下手。不过在学习任何东西前都不要产生畏惧的心理,不然会给自己在后面的学习太大的压力。所以,学习前就让我们先调整好心态。

       还有还有！！！像此类学习不要把时间都花在记笔记上而是应该多打代码，用我们老师的话说就是“七分打，三分计”！

---

一、学前先明白CSS是什么?

1、什么是CSS

• CSS：Cascading Style Sheet 层叠样式表
• 是一组样式设置的规则，用于控制页面的外观样式

2、为什么使用CSS

• 实现内容与样式的分离，便于团队开发
• 样式复用，便于网站的后期维护
• 页面的精确控制，让页面更精美

3、CSS作用

• 页面外观美化
• 布局和定位

————————————————
版权声明：本文为CSDN博主「是叽叽呀」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43331963/article/details/106784229

二、对CSS学前的知识概述

       CSS所学的内容说多不多，说少不少，里面有一些是值得我们需要加强学习，比如重点：浮动、清除浮动、盒子模型、定位。

• CSS选择器
• 字体属性
• 伪类选择器
• 元素显示模式
• CSS背景颜色\图片
• CSS的三大特性
• 盒子模型
• 盒子边框装饰
• 浮动
• 清除浮动
• 定位

三、CSS前期重点:浮动与清除浮动

浮动的作用:标准流无法实现所有的盒子排列方式时可以使用浮动效果.

使用overflow的情况:

1. 防止溢出父盒子
2. 外边距嵌套块元素塌陷
3. 清除浮动

在使用浮动过程我们会出现一个缺点:当父盒子里的子盒子使用浮动,父盒子会没有高度,子盒子占据了父盒子的位置,所以此时我们需要清除浮动.

清除浮动的方法:

1.overflow:hidden | auto | scroll;

2.:after 方式是额外标签法的升级版 ； 

.clearfix:after {  
content: ""; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;  
 } 
 .clearfix {  /* IE6、7 专有 */ 
         *zoom: 1;
 }   

3.clear:both

 .clearfix:before,.clearfix:after {
   content:"";
   display:table; 
 }
 .clearfix:after {
   clear:both;
 }
 .clearfix {
    *zoom:1;
 }   
 

---

总结

对于浮动与清除浮动的使用需要多在综合案例中与盒子模型多使用与练习.总的一句话对于学习网页前端需要大家结合理论进行多大代码才能够更好的掌握与应用.