页面元素中常常接触到浮动元素,即float:left/right,左浮动和右浮动。
(1) 浮动常见的属性: 1.浮动的元素不保留之前的位置,会被后面的元素顶替自己的位置 2.给一个元素加浮动,只会影响后面的元素,不会对前面的元素造成影响 3.父级盒子宽度不够的时候,即无法容纳浮动子盒子,浮动的子盒子就会换行 4.float浮动有左浮动left和有浮动right,都会排成一行显示,左右浮动后的元素呈现镜像的显示 5.float浮动的元素为半浮动,即浮动元素被后面元素顶替位置的时候,后面元素中的内容会被挤出到浮动元素外。(定位则是全浮动,即后面的元素会完全被前面元素覆盖) 6.使用了浮动的元素,宽度是由内容大小撑开的,而不是继承父元素的宽度 7.父元素没有设置高度的情况,会被子元素的高度撑开,若子元素设置了浮动,则父元素的高度会坍塌而没有。
(2) 清除浮动的方式: 1.被浮动影响的兄弟元素可以使用的方法: clear:left/right/both清除对应浮动。 2.被浮动影响的父子元素(一般是父元素没有设置高度导致发生高度坍塌的时候)可以使用的方法: 1). 可以直接给父元素定死高度 2). 重新在父元素中设置一个没有高度宽度且用clear清除了浮动影响的子元素。 3). 通过给父元素插入伪类元素,伪类元素中用clear清除浮动即可,与方法2相似,但需要注意伪类元素插入的为行内元素,需要转换为块元素才可以实现效果。在实际网页中,通常直接给clearfix一个伪元素,操作和以上一样,什么元素需要清除浮动则加入到class中即可。 4). 直接给父元素添加overflow: hidden也可以清除子元素浮动带来的影响,比较常用。
总结:浮动元素可以有效解决页面的一些导航栏里面的内容以及类似的行向内容添加的地方,但需要注意对后面元素的影响,是否需要清除浮动,还需要根据页面显示的实际情况决定,防止页面布局被破坏即可。
随心笔记加自己的小小见闻。