css浮动和不浮动 |css font写法

.float {
float: left;
width: 50%;
}
.no-float {
width: 50%;
}

首先，大家来看一下浮动属性。设置元素的float属性为left或right，可以使元素脱离文档流，向左或向右浮动。当使用浮动属性时，可以同时设置其宽度，以实现元素间的间距。

比如上述代码中的.float类，设置了一个宽度为50%的元素向左浮动，可以使另外一个元素与之排列在同一行而不会换行。

但是，浮动属性也会带来一些问题，如浮动的元素与其后面的元素出现重叠等。此时可以使用清除浮动的方法，即在浮动元素的父元素中添加clearfix类。

.clearfix::after {
content: '';
display: block;
clear: both;
}

紧接着，大家来看一下不浮动的属性。不浮动属性指的是不设置float属性的元素，它们会保持在文档流中，不会脱离文档流。不浮动的元素可以使用display属性设置为block或inline-block，以实现宽度设置和行内元素转为块级元素的效果。

比如上述代码中的.no-float类，设置了一个宽度为50%的块级元素。这个元素会在文档流中占据50%的宽度，与之排在同一行的下一个元素会自动换行。

总的来说，浮动和不浮动属性的使用需要灵活掌握，在具体实践中根据需要进行合理选择。