float默认为none,对应标准流的情况。当float : left;
时,元素就会向其父元素的左侧靠紧,脱离标准流,同时宽度不再伸展至充满父容器,而是根据自身内容来确定。
准备代码
<code class="hljs django"><span class="xml"><span class="hljs-tag">html</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">"http://www.w3.org/1999/xhtml"</span>></span> <span class="hljs-tag">head</span>> <span class="hljs-tag">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"Content-Type"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"text/html; charset=utf-8"</span> /> <span class="hljs-tag">title</span>><span class="hljs-tag"><span class="hljs-name">title</span>></span> <span class="hljs-tag">style</span>><span class="css"> <span class="hljs-selector-tag">body</span> { <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>; } <span class="hljs-selector-id">#father</span> { <span class="hljs-attribute">background-color</span>: cyan; <span class="hljs-comment">/*父级div 没有定位 造成子div的margin-top传递给父级*/</span> <span class="hljs-attribute">position</span>: absolute; } <span class="hljs-selector-id">#father</span> * { <span class="hljs-attribute">margin</span>: <span class="hljs-number">10px</span>; <span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>; <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> dashed red; } <span class="hljs-selector-id">#son1</span> { } <span class="hljs-selector-id">#son2</span> { } <span class="hljs-selector-id">#son3</span> { } </span><span class="hljs-tag"><span class="hljs-name">style</span>></span> <span class="hljs-tag"><span class="hljs-name">head</span>></span> <span class="hljs-tag">body</span>> <span class="hljs-tag">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"father"</span>> <span class="hljs-tag">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"son1"</span>>#son1<span class="hljs-tag"><span class="hljs-name">div</span>></span> <span class="hljs-tag">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"son2"</span>>#son2<span class="hljs-tag"><span class="hljs-name">div</span>></span> <span class="hljs-tag">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"son3"</span>>#son3-son3son3son3<span class="hljs-tag"><span class="hljs-name">div</span>></span> <span class="hljs-tag">p</span>> 这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字 <span class="hljs-tag"><span class="hljs-name">p</span>></span> <span class="hljs-tag"><span class="hljs-name">div</span>></span> <span class="hljs-tag"><span class="hljs-name">body</span>></span> <span class="hljs-tag"><span class="hljs-name">html</span>></span></code>
position:absolute
,是为了消除未定位父div的margin-top传递问题
,见http://blog.sina.com.cn/s/blog_6bec36f9010110w9.html如果前面有float:left的元素,他会影响下面元素,如上例中的p,在p元素中写clear : left即可消除前面左浮动元素对本元素的影响.同理clear:both是左右都清除.
position取值有static absolute relative fixed
这个是默认的,即标准流排下来,就是static定位方式.
在浏览器窗口中固定,什么论坛中的[回到顶部]这种按钮就是fixed做的
练习做个回到顶部玩玩
<code class="sourceCode html hljs xml"><span class="kw"><span class="hljs-tag"><<span class="hljs-name">div</span></span></span><span class="ot"><span class="hljs-tag"> <span class="hljs-attr">id</span>=</span></span><span class="st"><span class="hljs-tag"><span class="hljs-string">"backToTop"</span></span></span><span class="kw"><span class="hljs-tag">></span></span> 回到顶部 <span class="kw"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span></code>
<code class="sourceCode css hljs"><span class="fl"><span class="hljs-selector-id">#backToTop</span></span> <span class="kw">{</span> <span class="kw"><span class="hljs-attribute">width</span>:</span> <span class="dt"><span class="hljs-number">100px</span></span><span class="kw">;</span> <span class="kw"><span class="hljs-attribute">height</span>:</span> <span class="dt"><span class="hljs-number">50px</span></span><span class="kw">;</span> <span class="kw"><span class="hljs-attribute">background-color</span>:</span> <span class="dt">red</span><span class="kw">;</span> <span class="kw"><span class="hljs-attribute">color</span>:</span> <span class="dt">white</span><span class="kw">;</span> <span class="kw"><span class="hljs-attribute">cursor</span>:</span> <span class="dt">pointer</span><span class="kw">;</span> <span class="kw"><span class="hljs-attribute">border-radius</span></span><span class="kw">:</span> <span class="dt"><span class="hljs-number">25px</span></span> <span class="dt"><span class="hljs-number">0</span></span> <span class="dt"><span class="hljs-number">0</span></span> <span class="dt"><span class="hljs-number">25px</span></span><span class="kw">;</span> <span class="kw"><span class="hljs-attribute">padding-left</span></span><span class="kw">:</span> <span class="dt"><span class="hljs-number">20px</span></span><span class="kw">;</span> <span class="kw"><span class="hljs-attribute">text-align</span>:</span> <span class="dt">center</span><span class="kw">;</span> <span class="kw"><span class="hljs-attribute">line-height</span>:</span> <span class="dt"><span class="hljs-number">50px</span></span><span class="kw">;</span> <span class="kw"><span class="hljs-attribute">position</span></span><span class="kw">:</span> <span class="dt">fixed</span><span class="kw">;</span> <span class="kw"><span class="hljs-attribute">bottom</span></span><span class="kw">:</span> <span class="dt"><span class="hljs-number">80px</span></span><span class="kw">;</span> <span class="kw"><span class="hljs-attribute">right</span></span><span class="kw">:</span> <span class="dt"><span class="hljs-number">0</span></span><span class="kw">;</span> <span class="kw">}</span></code>
显示效果
相对于自己的偏移,而且不脱离标准流,使用top/bottom left/right指定偏移量
根据别的已定位元素进行定位,应用absolute规则的脱离标准流
Trick
只设置 position : absolute
,而不设置top/bottom/left/right值,那么元素会保持在原地,但是已经脱离标准流.
display取值有inline block none
设置为none,即可将其隐藏,像inline-block等新添加的,参考http://www.w3school.com.cn/cssref/pr_class_display.asp