我应该使用浮动以外的东西吗？

Question

我想要两个添加两个表格，一个在左边，一个在页面右边 ，然后我写的应该显示在它们的下面。但问题是它显示在两种形式之间。

<form class="login">.....</form> 
<form class="signup">.....</form> 
<p>This content should be displayed below but it is displayed in space  between the two forms</p> 

CSS

.login{ 
float:left; 
} 

.signup{ 
float:right; 
} 

Answer 1

浮动元素的使用是非常不鼓励的，因为有很多其他更好的替代品可以用来代替。 最好的选择是

1. display：inline-block;

CSS

.login{ 
display:inline-block; 
} 

.signup{ 
display:inline-block; 
} 

Flexbox

如果仍然希望使用浮动元素可以使用clearfix。 Clearfix是一种元素自动清除其子元素的方式。欲了解更多信息，请阅读How to use clearfix

Answer 2

提起Width属性width:50%;将工作

.login{ 
 
float:left; 
 
width:50%; 
 
} 
 

 
.signup{ 
 
float:right; 
 
    width:50%; 
 
}

<form class="login">.....</form> 
 
<form class="signup">.....</form> 
 
<p>This content should be displayed below but it is displayed in space  between the two forms</p>

Answer 3

添加风格clear:both你的款会有所帮助。

.clear 
{ 
    clear:both; 
} 

<p class="clear">This content should be displayed below but it is displayed in space between the two forms</p>