div流式布局_html/css

来源：懂视网责编：小采时间：2020-11-27 16:30:26

div流式布局_html/css

div流式布局_html/css_WEB-ITnose:css 布局 //style.css#first{ width:300px; height:200px; background:red; float:left}#second{ width:300px; height:200px; background:pink; clear:right}#third{ width:300px; height:200px

推荐度：

点击下载本文 文档为doc格式

导读div流式布局_html/css_WEB-ITnose:css 布局 //style.css#first{ width:300px; height:200px; background:red; float:left}#second{ width:300px; height:200px; background:pink; clear:right}#third{ width:300px; height:200px

css 布局

//style.css#first{	width:300px;	height:200px;	background:red;	float:left}#second{	width:300px;	height:200px;	background:pink;	clear:right}#third{	width:300px;	height:200px;	background:green;	clear:left}#four{	width:300px;	height:200px;	background:blue;	float:right}

	div的概念		第一个div	第二个div	第三个div	第四个div

求大神指导，为什么第二个div没办法显示出来，还有是不是float跟clear不能再同一行里是用？？？

回复讨论(解决方案)

很明显，你的第二个div左侧有浮动，而你只是清除了左侧浮动，因为第一个和第二个div的高度宽度完全一致，那么第二个div便挤了上来，正好和第一个div重合

清除左侧浮动试试

如果两个块属性元素要在同一行里显示，个人建议两个块都要设置浮动，不能单凭左侧浮动后边元素挤上来的办法来解决，因为这样如果后边元素有内容的话，在低版本IE下会有兼容问题

那第三个div跟第四个div为什么不在同一行啊

#first{ width:300px; height:200px; background:red; float:left; z-index:1;} #second{ width:300px; height:150px; background:blue; clear:right; z-index:2;} #third{ width:300px; height:200px; background:green; clear:left} #four{ width:300px; height:200px; background:blue; float:right}

我把这个代码改成这样按你的说法应该是会同时显示第一个div跟第二个div 可是还是没办法显示第二个div 能解释下吗大神

其实我只是想说，掌握基本的原则还是有必要的，比如标签嵌套规范，基本的兼容性问题

我们不是需要挨个去测试怎样才是兼容性的代码，而是我们知道哪些是有兼容问题的，然后才去避免不兼容写法

每次我看到很多学习CSS的人纠结为什么用p标签、li 类似这样问题，就很蛋疼，其实用什么都是一样的，也许仅仅是语义化的问题

第三个div跟第四个div为什么不在同一行？

因为第三个很明显是块属性元素，那么块属性元素的特点是什么，不管怎样，独占一排显示

我不觉得你更改后的代码有什么特别，层级的概念要结合定位，单纯的定位层级是没有意义的

http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html

div流式布局_html/css

推荐度：

点击下载本文 文档为doc格式

标签： html 布局 css

热门焦点

div流式布局_html/css

div流式布局_html/css

回复讨论(解决方案)

div流式布局_html/css

最新推荐

猜你喜欢

热门推荐