Use a space instead of a dot to prevent breaking layouts
Add a zero font-size property to make it all smooth

Float is a CSS positioning property. If you are familiar with print design, you can think of it like an image in a layout where the text wraps around it as necessary. In web design, an image that is floated remains a part of the flow of a web page. That means that if it changes in size or if the elements around it change, the page will automatically adjust (reflow). This differs from page elements that are absolutely positioned. Absolutely positioned page elements are removed from the flow of a web page. Absolutely positioned page elements will not affect any other page elements, whether they touch each other or not.