div+css基础——4.div浮动引发的问题
2013-05-26 16:28
375 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>div浮动引发的问题</title> <meta name="keywords" content="自定义关键字"/> <meta name="description" content="自定义描述"/> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style type="text/css"> body{ margin:0 1px 2px 3px; } #father{ background-color:#FFFF99; width:100%; height:100px; border:1px dashed green; } #son1{ float:left; } #son2{ float:left; } #son3{ float:left; } </style> </head> <body> <div id="father"> <div id="son1">aaaaaaaaaa</div> <div id="son2">bbbbbbbbbb</div> <div id="son3">cccccccccc</div> <div id="son4">dddddddddd</div><!--son4没有浮动,但它会受到上面浮动的印象,也跟着浮动了--> </div> </body> </html>
效果截图:
解决方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>div浮动引发的问题</title> <meta name="keywords" content="自定义关键字"/> <meta name="description" content="自定义描述"/> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style type="text/css"> body{ margin:0 1px 2px 3px; } #father{ background-color:#FFFF99; width:100%; height:100px; border:1px dashed green; } #son1{ float:left; } #son2{ float:left; } #son3{ float:left; } #clear{ clear:both; /*解决方法:清除浮动*/ } </style> </head> <body> <div id="father"> <div id="son1">aaaaaaaaaa</div> <div id="son2">bbbbbbbbbb</div> <div id="son3">cccccccccc</div> <div id="clear"></div> <div id="son4">dddddddddd</div><!--son4没有浮动,但它会受到上面浮动的印象,也跟着浮动了--> </div> </body> </html>
效果截图:
相关文章推荐
- div+css基础——4.div浮动引发的问题
- 处理div+css布局左右浮动问题
- DIV+CSS基础教程:浮动(float)页面布局
- 三个div,一个左浮动,一个有浮动,另外一个不浮动引发的样式问题
- 解决子级用css float浮动,而父级div不能自适应高度问题
- css解决浮动带来的父级div高度不自动增加的问题
- DIV+CSS基础教程:浮动
- Div + Css 设计网页时浮动问题的解决方法
- DIV+CSS基础教程:清除浮动
- div+css布局问题:设置浮动后的div高度变化后不超出最外层div
- CSS+DIV 浮动 空隙问题
- 关于DIV+CSS浮动问题的汇总[增加中]
- div+css基础——3.采用div浮动对div进行排版
- div+css基础——3.采用div浮动对div进行排版
- IE6,IE7,FF | CSS + DIV 兼容问题综合解决方案CSS HACK【转】
- DIV+CSS命名规则-增强SEO从基础做起
- css简写属性和常见基础问题
- HTML5基础加强css样式篇(css过渡属性的隐式过渡问题)(二十二)
- CSS基础:DIVcss初学者需要引起重视的10个问题与技巧
- div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox...) 三