怎么解决使用float浮动的时候元素不占高度的问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么解决使用float浮动的时候元素不占高度的问题相关的知识，希望对你有一定的参考价值。
要浮动的图片宽度给的是百分百，外层不能用盒模块确定高度，浮动层下面的样式往上飘，除了弹性盒子还有什么方法能解决吗
参考技术A 清除浮动，在下面加上clear:both本回答被提问者采纳Flex布局摆脱float带来的布局问题
完整文章地址http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
使用浮动(float)的一个比较疑惑的事情是他们怎么影响包含他们的父元素的。如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零。那我们就不能
做高度根据内容自动调整的布局，但是利用flex布局可以实现，不需要设置父元素的宽度和高度，让父元素根据子元素自动调整大小。
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局：.div{dispaly:flex}.采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员。这里我主要说一下容器的一个属性flex-direction.他有4个取值分别为：row、row-reverse、column、column-reverse.
row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。
代码如下：
可以通过设置flex-direction属性得到不同的效果。下面代码只是设置{flex-direction:row}。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type="text/css">
.div1{
display: flex;
flex-direction: row;
border:1px solid red;
width:300px;
}
.div1 div{
border:1px solid black;
margin:10px 10px;
width:50px;
height:50px;
}
</style>
</head>
<body>
<div class="div1">
<div>a
</div>
<div>b
</div>
<div>c
</div>
</div>
</body>
</html>
以上是关于怎么解决使用float浮动的时候元素不占高度的问题的主要内容，如果未能解决你的问题，请参考以下文章