CSS实例教程:完全弄懂闭合波动元素

2021-03-15 18:59 jianzhan

1般说来假如某个子元素应用了波动(float),那父元素一直不可以准确地了解子元素是在甚么部位完毕的,因此父元素的下边框一直从子元素的正中间乃至是顶部穿过,看起来很不舒适。
  近期两个月时断时续做了好几个网站的美工,做的全过程中对DIV Css的规范开发设计有了进1步的掌握。有两点获得最大,1是完全弄懂了CSS的盒子方式(Box Model),再1个便是搞定了困扰我很久的“闭合波动元素”的难题:
  1般说来假如某个子元素应用了波动(float),那父元素一直不可以准确地了解子元素是在甚么部位完毕的,因此父元素的下边框一直从子元素的正中间乃至是顶部穿过,看起来很不舒适。
  最开始时我全是在子元素完毕后独立加个<br />或<div></div>将其特性设定为“clear:all;”,但这样1来就必须转化成很多没用的空标识,乃至一些网站必须改动ASP编码以全自动加上这些空标识,只能算是下策。
  后来发现当父标识也设定为波动(float)时便可以在正确的部位闭合了,因此就把父非常容易也波动起来,这样1来许多ASP编码就不必须改了,遇到必须加上含Clear特性的空标识时假如不可以从模版中加上,而必须从ASP编码中加上时,就不必须改ASP编码了,只必须把父器皿设为波动,假如还必须改ASP,那就再把父器皿的父器皿设为波动,1层层地波动上去,总能处理难题的。这尽管能省很多事,但很非常容易导致全部网页页面中都是波动元素,-_-!!! 也只能算是中策罢了。
  再后来,在网络上检索其他物品时不经意发现有人说要是在父器皿的CSS特性中再加下列两个特性便可以搞定了:
overflow: auto;
_height: 1%;
  试了1下,果真功能强大,这么1来,这在现阶段应当算是处理这1难题的上策了:不必须对网页页面做每日任务改动,也基础上不必须对父器皿--乃至是父器皿的父器皿做甚么修改,只给父器皿加上两个没有谓的特性就搞定了。