Shulou(Shulou.com)06/03 Report--

Editor to share with you the example analysis of div+ floating in website design, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to know it!

In the construction of the website, we will always encounter all kinds of problems of html and css. Open the home page of the website https://www.yisu.com and view the source code. The screen is full of html tags, no less than dozens of div.

Html includes two kinds of elements: inline elements (inline elements) and block elements.

Inline elements are non-wrapping elements and are adaptable in size. For example, an img font span, when we build a website, the text content is the inline elements.

Block elements are displayed on new lines regardless of the width and height of the content, such as div p li, which is generally used in the layout of a website.

The switch between inline elements and block elements uses the two css attributes display: inline block..

For inline elements, if there are block elements inside, use display:inline-block

Inline is only used when the internal inline element is included.

Inline elements can contain inline elements. Try not to include block elements.

Inline elements and block elements can be nested within block elements.

To float float in a website is to drift itself to the border of the parent element, or to the border of the previous floating element. Floating is very useful when using ul li to do menu.

Floats can also be used when using div for menu.

Float:right

Floating rigth can make the floating box abandon the original position behind the float will float to the right boundary of the parent element border to stop it is best if we use floating to do the site menu, a group of menu had better float all or not float if there is a no float in the middle there will be a strange display effect space is not big enough to go down to adapt. Leave the parent element until it is filled.

Float:left

Float left and right are actually the same, except one to the left and one to the right. Their floats will reach the parent's border or the previous floater, and if one height in a pair of div is higher than the other div in your site, then the floating div will be stuck behind him until there is enough space.

Floating for inline elements will set the style to block elements and can set width and height.. Otherwise, these two attributes are invalid, but although it is a block element, it will give up the position on the right side of the same line, and it can display other content, such as the text package diagram of many websites when typesetting is this principle.

Clear the float. Is to clear the floating effect.

The key to floating is to give up the position and then the previous float is fast.

The above is all the contents of the article "sample Analysis of div+ floats in website Design". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.