浮动以及overflow

浮动的初体验

问题:在页面上有两个盒子,一个盒子靠着屏幕左侧显示另一个盒子靠着屏幕的右侧显示?
作用:解决一行中显示多个盒子的问题(并且这些盒子的位置可控。)
浮动的代码:
float:left;
float:right;

浮动的特点

标准流:就是浏览默认摆放盒子的标准。
==浮动的元素会脱离标准流==:
==如果一个元素按照正常的标准流来显示,会在html中所属的位置占位,后面的元素会紧跟着它。==但是浮动脱了标准流,将来在看到浮动的元素之后,不能以正常的标准流来进行判断。(在标准流中不占位置了,它是在标准流之上)
浮动以后的元素会覆盖在标准流的元素之上。
浮动规则:浮动找浮动,不浮动找不浮动
浮动找浮动:只有写在同一个结构下面的浮动才会浮动找浮动。

浮动显示的位置与原本不浮动之前的位置是对应的:
浮动的重点:==********浮动的元素只会影响下面的元素,不会影响上面的元素********==:
浮动的元素会改变显示方式:
不管元素是行内元素还是块级元素将来在显示 的时候都会在同一行中显示。
浮动以后的元素可以设置宽高。
==总结:浮动以后的元素的显示方式与行内块级元素一样。==

浮动的案例:
1.0使用浮动完成页面的布局

2.0制作导航
注意:以后使用a标签直接来制作导航是有问题的

1.0导航与导航之间应该是列表的关系,所以如果想要将这个些关系通过html语义化表示出来必须要用到ul标签。

2.0如果这些a标签你不用其它的标签包裹起来,那么将来浏览器会将这些a标签中的文字当作全部一起显示。SEO在查
看页面的时候会认为这个页面进行作弊,就是进行了关键字的堆砌。
必须要用ul中的li标签将a中的内容包裹起来。
3.0文字环绕图片

清除浮动

浮动对页面的影响:

如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0,下面的元素会自动补位,所以这个时候要进行浮动的清除。
float: left;float: right;
清除浮动:clear:both;

使用额外标签法:

在浮动的盒子之下再放一个标签,在这个标签中使用clear:both,来清除浮动对页面的影响。

内部标签:在浮动盒子的下边加一个空盒子。

会将这个浮动盒子的父盒子高度重新撑开

外部标签:在浮动盒子的父级的下边加一个空盒子。

会将这个浮动盒子的影响清除,但是不会撑开父盒子。
注意:一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签。

使用overflow属性来清除浮动:

先找到浮动盒子的父元素,再在父元素中添加一个属性:overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响。
注意:一般情况下也不会使用这种方式,因为overflow:hidden有一个特点,离开了这个元素所在的区域以后会被隐藏(

使用伪元素来清除浮动:

.clearfix:after {
content: "";//添加内容为空
height: 0;//内容高度为0
line-height: 0;//内容文本的高度为0
display: block;//将文本设置为块级元素
clear: both;//清除浮动
visibility: hidden;//将元素隐藏
}
.clearfix {
zoom: 1;/为了兼容ie6/
}

使用双伪元素清除浮动:

伪元素:在页面上不存在的元素,但是可以通过css来添加上去。
种类:
:after(在。。。之后)
:before(在。。。之前)
注意:每个元素都有自己的伪元素。

overflow:溢出

取值:
hidden:会将超出容器的部分隐藏起来
scroll:给容器加上滚动条(==使用时注意设置内容高度,这样才能滚动起来。)==
auto:根据具体情况判断容器是否要加上滚动条

元素的隐藏:

overflow:hidden//将超出的部分裁剪掉
==visibility: hidden==//可以将元素隐藏,但是在页面上还保留着原来的位置。(停薪留职)
==display: none==;//可以将元素隐藏,并且在页面不占据位置。
diplay:none与display:block是一对反义词。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,884评论 0 6
  • 当在这一个页面上实现布局和定位有几种不同的技术。使用哪种技术,很大程序上取决于内容和目标页面,因为有很多技术比别人...
    lulu_c阅读 1,124评论 0 5
  • 末日前夕的凌乱日记(3) 音符写梦 2014-5-23 18:25 窗外飘来阵阵炒菜的香味,听着连绵不断的车辆来来...
    如伊老师阅读 206评论 0 1
  • 无意间在网上看到一篇关于土耳其的游记,里面提到了很多中东美食,突发奇想就来尝试做一下。搁在以前问我中东都有哪些美食...
    愛老虎猴阅读 1,339评论 4 6