在CSS网页开发布局中，需要对浮动和定位有深刻的理解才能在开发中游刃有余。基于此，在博客园中做了本篇总结，这些总结来自实践经验和阅读一些书籍后的理解总结，主要内容为浮动，清除浮动，定位。（可点击屏幕左边的目录查阅）一. float属性深入理解首先简单布局一下，代码如下：<! ...
在CSS网页开发布局中，需要对浮动和定位有深刻的理解才能在开发中游刃有余。
基于此，在博客园中做了本篇总结，这些总结来自实践经验和阅读一些书籍后的理解总结，主要内容为浮动，清除浮动，定位。
（可点击屏幕左边的目录查阅）
一. float属性深入理解
首先简单布局一下，代码如下：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>css Test</title><style type="text/css">#bigBox { border: 2px solid Gray; width: 500px; height: 400px; margin: 100px auto;}#box1{ background: yellow; width: 100px; height: 100px;}#box2{ background: SkyBlue; width: 120px; height: 100px;}#box3{ background: pink; width: 140px; height: 100px;}</style></head><body><div id="bigBox"> <div id="box1">1</div> <div id="box2">2</div> <div id="box3">3</div></div></body></html> 图p12
2. 清除浮动方法（父元素受影响）
图p7中我们看到父元素把子元素1,2,3视为消失，所以无法自适应子元素的宽度，为了消除子元素浮动对父元素的影响，这里有三个方法可以解决问题，我们来测试分析一下。
先把父元素受影响的代码和效果图贴出来：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>css Test</title><style type="text/css">body { margin: 0 300px;}#bigBox { border: 2px solid Gray;/* width: 500px; height: 400px;*/ margin: 100px auto; /*clear: both;*/}#box1{ background: yellow; width: 100px; height: 100px; float: left; /*测试内容*/}#box2{ background: SkyBlue; width: 120px; height: 100px; float: left; /*测试内容*/}#box3{ background: pink; width: 140px; height: 100px; float: left; /*测试内容*/}#clear { clear: both;}</style></head><body><div id="bigBox"> <div id="box1">1</div> <div id="box2">2</div> <div id="box3">3</div></div></body></html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：深入理解CSS网页布局
关键词：CSS
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
