float元素设置高度

方案一

在浮动元素下面加一个清除浮动的元素:div{clear:both}

html

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div

css

.clearfix:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

方案二

将父元素也设置为浮动的

html

<div style="float: left;">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>

方案三

为父元素显式的设置高度,不推荐

html

<div style="height: 400px;">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>        
</div>

方案四

为父元素加入overflow:hidded属性或者overflow:auto属性

html

<div style="overflow: hidden;">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>        
</div>

上面四种方案,方案一比较靠谱,兼容性最强

转载地址:https://segmentfault.com/q/1010000005958273


Warning: Use of undefined constant wp_related_posts - assumed 'wp_related_posts' (this will throw an Error in a future version of PHP) in /var/www/html/afox/wp-content/themes/minty/functions.php on line 206

Warning: Use of undefined constant related_entries - assumed 'related_entries' (this will throw an Error in a future version of PHP) in /var/www/html/afox/wp-content/themes/minty/functions.php on line 207
分享到:

发表评论

昵称

This site uses Akismet to reduce spam. Learn how your comment data is processed.

沙发空缺中,还不快抢~