#025_Lay_floats
我们这两节课学习的布局中,非常重要的一个属性是 float 属性,正如其名,float 属性定义元素在哪个方向浮动。任何元素都可以浮动。这里强调以下:最好给予浮动块属性一些固定的宽度、高度,以避免浮动块布局难看。
内容基础
这些内容相信每一期跟下来的话都是会写的,这里就不展示 HTML 文档了。
用了aside怕等下样式编写的时候大家没看懂,或者不知道样式对什么元素进行设置。
初步处理
width、margin、background-color不再重复,如其名,以【属性:值;】格式编写,class和id的内容也不再重复,【.xxx】用于class【#xxxx】用于id。
注意,作为主块的 wrap 包裹着 content 和 aside,所以他的宽度 width 必须比 content 和 aside 的大,不然布局就会走形(例如 aside 会到 content 的下一行才开始)
样式精进
上一个效果的出现是因为没有设置块元素的高度、宽度,这样块会对块内元素的内容进行自动适应,所以出现了这种左右不均匀、转行跨界的效果。所以这里对两个子块的高度进行统一。
修正之后,因为高度属性 height 变成统一的 300px,所以两个块元素对齐,修正了之前的效果。
去除浮动块间隙
因为 content 和 aside 两个块元素都是浮动的,所以在 wrap 中会在 content 和 aside 与剩余的 wrap 之间形成空白间隙,为了解决这些间隙,我们在 wrap 的样式中,加入一条——
overflow: hidden;
加入这个属性之后,就会对 wrap 块中因为浮动产生的空白块被隐藏起来,从而整体效果上看,各个块的衔接会更加紧凑和自然。(不清楚 overflow 效果的可以去掉这个属性刷新网页看看效果。)