In the last article, we learned about float and clear properties in CSS and also seen two examples involving both of them. Now in this article, we are going to see some problems while using them and some practical examples.
Let's begin...
Let's see an example...
You can definitely style it much more using concepts of CSS we have learned but I have presented simplistic output. Try...
That's all for today. In the next article, we will learn about inline blocks in CSS.
Till then #keepCoding.
Let's begin...
Too much height
If you have tried it(or mistakenly encountered it 😎), if the height of an Element is taller than element containing it, and it is floated then that element will overflow outside of its container. To solve this issue, we can add overflow: auto; to the containing element to fix this issue.Let's see an example...
Practical example
We can create entire web layout using float and clear properties now. I have given one below. You should just see the output and try to code to see how far you can reach...You can definitely style it much more using concepts of CSS we have learned but I have presented simplistic output. Try...
That's all for today. In the next article, we will learn about inline blocks in CSS.
Till then #keepCoding.
