Float问题及其解决方法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Float问题及其解决方法相关的知识，希望对你有一定的参考价值。
Float问题及其解决方法
float 属性：
定义元素向哪个方向浮动。在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。Float的属性值可以为：left、right、none、inherit等。
注意：
假如在一行上不够容纳整个浮动元素，则该元素会自动跳到下一行，依次往下跳，直到空间足够为止。
例如：
<style> .content{ width:800px; float:left; border:1px solid #000; } .left,.right{ width:500px; height:200px; border:1px solid #666; } .left{ float:left; } .right{ float:right; } </style> <body> <div class="content"> <div class="left">向左浮动</div> <div class="right">向右浮动</div> </div> </body> // 元素right最终在left下方。
Float属性带来的问题和解决方法：
1.float元素挡住了普通元素。
例如：
<style> .content{ height:600px; border:1px solid #CCC; } .left{ width:20%; height:400px; float:left; border:1px solid #CCC; } .right{ width:20%; height:400px; float:right; border:1px solid #CCC; } .main{ margin-left:21%; margin-right:21%; height:200px; border:1px solid #CCC; } .footer1{ height:100px; border:1px solid #CCC; } </style> <body> <div class="content"> <div class="left">left</div> <div class="right">right</div> <div class="main">main</div> <div class="footer1">footer没有清除浮动的状态</div> </div> </body> // left和right元素将漂浮在footer1元素上面，挡住了footer1的左右。
解决方法：采用clear属性清除浮动。
例如：
<style> .content{ height:600px; border:1px solid #CCC; } .left{ width:20%; height:400px; float:left; border:1px solid #CCC; } .right{ width:20%; height:400px; float:right; border:1px solid #CCC; } .main{ margin-left:21%; margin-right:21%; height:200px; border:1px solid #CCC; } .footer2{ height:100px; clear:both; border:1px solid #CCC; } </style> <body> <div class="content"> <div class="left">left</div> <div class="right">right</div> <div class="main">main</div> <div class="footer2">采用clear清楚浮动后的状态，footer元素出现在底端而且上面有float元素</div> </div> </body>
2.普通元素包含了浮动元素时，如果浮动元素高大于普通元素，则浮动元素将会溢出普通元素的范围。
注意：接下来的例子均以浮动一张较大的图片为例，可以自行链接一张图片。
例如：
<style> img{ float:left; } h1{ border:1px solid #000; } </style> <body> <div class="content1"> <h1><img src="img.jpg" />未处理</h1> <p>如果非浮动元素中有高于它的浮动元素时，浮动元素会超出非浮动元素的范围。 例如：图片高度超出了h1标签的高度</p> </div> </body>
解决方法1：加大父级元素高度，但扩展性不好，因为有时不能完全确定浮动元素的宽高。
<style> img{ float:left; } h1{ height:300px; border:1px solid #000; } </style> <body> <div class="content"> <h1><img src="img.jpg" />加大父级元素高度。</h1> </div> </body>
解决方法2：采用设置浮动元素的父级元素。
<style> img{ float:left; } h1{ float:left; border:1px solid #000; } </style> <body> <div class="content"> <h1 class="h1float"><img src="img.jpg" />采用设置浮动元素的父级元素</h1> </div> </body>
解决方法3：采用在浮动元素尾部增加设置了浮动的br元素。
<style> img{ float:left; } h1{ border:1px solid #000; } br{ clear:both; } </style> <body> <div class="content"> <h1><img src="img.jpg" />采用增加设置浮动的br标签<br /></h1> </div> </body>
解决方法4：采用给父级元素加overflow。
<style> img{ float:left; } h1{ overflow:hidden; border:1px solid #000; } </style> <body> <div class="content"> <h1 class="h1overflow"><img src="img.jpg" />采用给父级元素加overflow</h1> </div> </body>
解决方法5：加类名clear，采用after伪类统一处理。（比较推荐）
<style> img{ float:left; } h1{ border:1px solid #000; } .clear:after{ content:""; display:block; clear:both; } </style> <body> <div class="content"> <h1 class="clear"><img src="img.jpg" />加类名clear，采用after伪类统一处理</h1> </div> </body>
解决方法6：采用dispay:inline-block;但是margin：auto会失效。
<style> img{ float:left; } h1{ display:inline-block; border:1px solid #000; } </style> <body> </div> <div class="content"> <h1 class="h1dispay"><img src="img.jpg" />采用dispay:inline-block;</h1> </div> </body>
以上是关于Float问题及其解决方法的主要内容，如果未能解决你的问题，请参考以下文章
为啥我在这个 python 片段中得到 float 是不可迭代的？ [复制]
CTS测试CtsWindowManagerDeviceTestCases模块的testShowWhenLockedImeActivityAndShowSoftInput测试fail项解决方法(代码片段
Vue报错：Uncaught TypeError: Cannot assign to read only property 'exports' of object 的解决方法(代码片段